リセットCSS

スポンサーリンク

HTMLを書いていると、h1とかh2などのタグ表示がWebブラウザによって少しずつ異なっていることに気付きます。
これは、Webブラウザ毎にデフォルトのCSSを持っていることが原因のようで、リセットCSSによってWebブラウザ毎の違いをあらかじめリセットしておいて、意図した通りに表示させることが出来ます。

単純にはCSS設定の始めに

	*{
	margin:0;
	padding:0;
	}

と書いて全ての要素に margin 0, padding 0 を設定するというもの。

これとは別に、色々な人たちが「このタグはこうやってリセットすると良いよー」といった雛形のCSSを提供してくれています。

ちょっと調べてみたので、最近人気っぽいものをいくつかメモ。

  • reset.css
  • Eric Meyer’s “Reset CSS” 2.0 | CSS Reset
    One of the pioneers of the method, Eric Meyer's CSS Reset is still in use on millions of websites today. Find it and others, with full guides and docs, on CSSRe...

    Eric Meyerさんという方が作成した、元祖リセットCSS。
    全てのスタイルをリセットするので、使用するタグにスタイルの設定漏れが無いように注意が必要。

  • normalize.css
  • Normalize.css: Make browsers render all elements more consistently.

    上記のreset.cssとは違い、Webブラウザ間の差異があるところだけ微調整してくれるもの。
    公式サイトによると、twitterやgithubといった有名どころでも利用されているらしい。
    PC、モバイル含めて主なWebブラウザをサポートしている。

  • sanitize.css
  • GitHub - csstools/sanitize.css: A best-practices CSS foundation
    A best-practices CSS foundation. Contribute to csstools/sanitize.css development by creating an account on GitHub.

    上記のnormalize.cssと同じ人が作成したもの。
    normalize.cssを更にもう一歩進めて、よく使うスタイルなどをあらかじめ設定してくれている。(ulのlist-style:noneとか)
    normalize.ccsと同様に主なWebブラウザをサポートしている。

  • reboot.css
  • Reboot
    Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.

    これもnormalize.cssを改良する形で作成したもの。
    bootstrap4 というフレームワークに含まれている。

    ーーーーーーー
    調べた感じではsanitize.cssが良さそうだけど、世間一般にはnormalize.cssがよく使われているみたいです。
    まあ、一度構築したら滅多に変更しないだろうし、新しいのはこれから普及するという感じでしょうか・・・?
    また、bootstrapを使用するならreboot.cssになるのかな。
    この辺は作成するサイトなどによって判断して使うんでしょうね。

    コメント