【CSS】リセットCSSとは
リセットCSSとは?
リセットCSSのメリット
- ブラウザごとのデザインを揃えることができる(これとにかく大事)
リセットCSSのデメリット
- CSSを書き始める前に準備しなければならない。
- 各ブラウザである程度揃っていた余白等のデザインがほぼ0になる
- デザインがほぼ0になるので、設定する項目が多くなる
っといった感じでデメリットも存在するのですが、ブラウザごとに異なるデザインになってしまうことを防止することはとにかく重要なので、Web制作の仕事をする上でリセットCSSはまず導入することになると思います。
リセットCSSの使い方
リセットCSSは、結局は通常のスタイルシートと原理は一緒です。導入の仕方も、HTMLファイルにリンクさせれば適用されます。
ただしここで一つ注意があり、「リセットCSSは自分で調整するスタイルシートよりも前にリンクさせなければならない」という点です。
画像のように、リセットCSSはデザインするためのスタイルシートよりも前にリンクさせる必要があります。もしリセットCSSが後にリンクされていると、デザイン用のスタイルシートを上書きしてしまい、余白も何にもないデザインになってしまいます。
リセットCSSはどうやって入手する?
リセットCSSにも様々な種類が存在し、様々な用途別で使用されています。ブラウザが持っているデザインの一部だけリセットするものや、全てのデザインをリセットするものもあります。今回は公開されているリセットCSSの内、HTML5に対応するものを一つご紹介します。
英語のページで紹介されていて詳細は私ではよく分かりませんが、ダウンロード方法だけ説明させて頂きます。
ページの下のほうにある「HTML 5 Reset Stylesheet」をクリックするとダウンロードページへ飛ぶので、最新版(※この記事を書いている段階では「html5reset-1.6.1.css 」)がダウンロードできます。
あとはお使いいただくファイルに、このリセットCSSをリンクさせるだけです。
まだまだたくさんのCSSが世には出回っていますが、それらのご紹介はまたの機会にさせて頂きます。
まとめ
- リセットCSSはブラウザ間でデザインの差異がでないようにするスタイルシートである
- リセットCSSはデザイン用のCSSよりも前にリンクさせて使用する(後にリンクさせるとデザインがリセットされてしまう)
- インターネット上にはたくさんのCSSが公開されており、一部が初期化されたり、全てのデザインがリセットされるものもある
それでは今回はここまでにします。お疲れ様でした(・ω・)ノシ