【CSS】リセットCSSを表示面/コード面から比較してみる
リセットCSSの比較をしてみました。
検証環境
- macOS 10.14.3
- Google Chrome 72.0.3626.121
比較方法
検証用HTMLはこれ
リセットCSSなし
リセットCSSがない＝ブラウザのデフォルトスタイルの状態です。以下のスクリーンショットはmacOSのChromeです。
- 周りに余白が付いている
- 見出しなどの上下にも余白あり
- form系のフォントサイズは小さめ（Chromeだけかもしれない？）
Eric Meyer’s “Reset CSS” 2.0
Eric Meyer’s “Reset CSS” 2.0 は、
- すべての余白が消える
- 見出し（h1〜h6）のウエイト（太さ）がなくなりすべてのフォントサイズが同じになる
- フォームのスタイルはブラウザによる
見出しと本文の違いがなくなりました。
内容を見ても、input要素やtextarea要素のスタイルについて記述がないので、フォームにも独自のスタイルをつけるときは別途リセットの記述が必要になります。
Normalize.css
Normalize.css: Make browsers render all elements more consistently.
Normalize.cssの見た目は、
- 見出しまわりの余白はある
- 大枠の余白は消える
- フォーム要素のフォントサイズは統一されるが枠線などは消えない
内容 を見ると、
- 様々なブラウザに考慮してある
ress.css
GitHub - filipelinhares/ress: A modern CSS reset
ress.cssは、
フォーム要素、特にselect要素のスタイルをリセットするのがひと手間かかるんですよね。ress.cssはIE11用に以下の記述があります。
select::-ms-expand {
display: none; /* Internet Explorer 11+ */
}
（内容）
これの意味は、selectの右側に表示される矢印を消すという意味なんですが、ゴリゴリとselectにもスタイルを当てていくときにこの矢印がなくなってると便利なんですよね。。そこも考慮されていて良いです。
sanitize.css
sanitize.cssは、
- 見た目はだいたいがNormalize.cssと同じ
- 日本語フォントと英語フォントが違う（すこし違和感がある…
内容を見ると、
- box-sizingプロパティにborder-boxが設定してあるので、ボックスのmarginを考慮せずに幅設定ができる
- 書体設定が細かく指定してある
オレオレCSS
そういえば自分でカスタマイズしたやつがあったのでこれも入れておこう。
小さい…
- Eric Meyer’s “Reset CSS” 2.0 に ress.css のフォーム系のリセットを足したような感じ
- ラジオボタン、チェックボックスも消える（独自スタイルをつけられるようにしたかったので
- テキストが小さいのは 62.5% を設定してある。（1rem = 10px）16pxの大きさにしたければ1.6remと書く。
62.5%はこういう使い方わざわざしなくてもよくない？という意見もある。今後変わっていくかな。
まとめ
便利なツールを作ってくれた先人に感謝しながらお仕事したいですね。
