世間では年があけたと大騒ぎですが、私はいつでもオープンです。@It_is_Rです。
祝ってください。
Web開発でブラウザごとの表示の違いをリセットしてくれる リセットCSS というものがあります。
しかし、何を使っていいのかと感じている人もいると思います。
今回はこの リセットCSS について、この記事にまとめました。
リセットCSS とは？
リセットCSS は、ブラウザごとの表示の違いをリセットしてくれる CSS です。
これを使うことによって、ブラウザごとの違いを意識せずにコーディングができ、楽になります。
リセットCSS の種類 & 人気ランキング
まず、 リセットCSS にはどのようなものがあるか、ダウンロード数人気ランキングも兼ねてみていきましょう。
以下が現在(2018/1/1)人気な リセットCSS です。といっても、数年前から変わってないっぽいですね。
- Eric Meyer’s “Reset CSS” 2.0
- HTML5 Doctor CSS Reset
- Yahoo! (YUI 3) Reset CSS
- Universal Selector ‘*’ Reset
- Normalize.css
参考:CSS Reset
Eric Meyer’s “Reset CSS” 2.0
リセットCSS でもっとも人気が高いのが、 Eric Meyer’s “Reset CSS” 2.0 です。
Eric Meyer’s “Reset CSS” 2.0
ただ、2011年1月26日から更新されていないようですので、そこだけ気になる部分ですね。
HTML5 Doctor CSS Reset
HTML5 Doctor CSS Reset は、先ほど紹介した Eric Meyer’s CSS reset を HTML5 で使うために修正したものだそうです。
HTML5 Doctor CSS Reset
Yahoo! (YUI 3) Reset CSS
Yahoo! (YUI 3) Reset CSS は、 Yahoo! が開発したものです。
Yahoo! (YUI 3) Reset CSS
Universal Selector ‘*’ Reset
Universal Selector ‘*’ Reset は、ユニバーサルセレクタを使って、全ての要素に margin: 0, padding: 0 を指定する、かなりシンプルなものです。
* {
margin: 0;
padding: 0;
}
Normalize.css
Normalize.css は、 リセットCSS とは少し違い、デフォルトのスタイルはあえて残しつつ、ブラウザごとの違いを修正するという考え方で作られているようです。
Normalize.css
まとめ
今回は 2018年でもっとも多くダウンロードされている リセットCSS を５つ紹介しました。
Web開発で、どれを使うのか、はたまた使わないのか。もちろん、自作したものを使うという方法もあると思います。
自分にあったものを見つけてみてください。
