HTMLを書いていると、h1とかh2などのタグ表示がWebブラウザによって少しずつ異なっていることに気付きます。
これは、Webブラウザ毎にデフォルトのCSSを持っていることが原因のようで、リセットCSSによってWebブラウザ毎の違いをあらかじめリセットしておいて、意図した通りに表示させることが出来ます。
単純にはCSS設定の始めに
*{
margin:0;
padding:0;
}
と書いて全ての要素に margin 0, padding 0 を設定するというもの。
これとは別に、色々な人たちが「このタグはこうやってリセットすると良いよー」といった雛形のCSSを提供してくれています。
ちょっと調べてみたので、最近人気っぽいものをいくつかメモ。
Eric Meyerさんという方が作成した、元祖リセットCSS。
全てのスタイルをリセットするので、使用するタグにスタイルの設定漏れが無いように注意が必要。
上記のreset.cssとは違い、Webブラウザ間の差異があるところだけ微調整してくれるもの。
公式サイトによると、twitterやgithubといった有名どころでも利用されているらしい。
PC、モバイル含めて主なWebブラウザをサポートしている。
上記のnormalize.cssと同じ人が作成したもの。
normalize.cssを更にもう一歩進めて、よく使うスタイルなどをあらかじめ設定してくれている。（ulのlist-style:noneとか）
normalize.ccsと同様に主なWebブラウザをサポートしている。
これもnormalize.cssを改良する形で作成したもの。
bootstrap4 というフレームワークに含まれている。
ーーーーーーー
調べた感じではsanitize.cssが良さそうだけど、世間一般にはnormalize.cssがよく使われているみたいです。
まあ、一度構築したら滅多に変更しないだろうし、新しいのはこれから普及するという感じでしょうか･･･？
また、bootstrapを使用するならreboot.cssになるのかな。
この辺は作成するサイトなどによって判断して使うんでしょうね。
コメント