リセットCSS？ノーマライズCSS？
HTMLには、Webブラウザが本来持っているスタイル情報があります。
しかし、Webデザインをしていく上で、邪魔になる場合がでてきます。
そんな時に「リセットCSS」や「ノーマライズCSS」という指定を使います。
Webブラウザ本来のスタイル情報を確認
見出しを意味するタグ<h1><h2>などは文字が大きく表示され、上下にマージンがつきます。
また、段落を意味するタグ<p>も上下にマージンがつきます。
箇条書きを意味するタグ<ul>は、左側に余白がつきます。
これが、すでにWebブラウザ自身が持っているスタイリングなのです。
リセットCSSとは
Webブラウザが本来持っているスタイリング情報が、レイアウトを思い通りに行うのに妨げになる場合があります。
これを思い通りにするのが「リセットCSS」という手法です。
これは、Web制作において長く使われてきました。
全ての要素が隙間なく隣り合うので、レイアウトしやすくなります。
しかしその一方、ブラウザが本来持っているスタイリングも一緒にリセットされてしまうので、
その表示を調整するのにかえって手間取ることも多々あります。
ノーマライズCSSとは
現在では、全体をリセットするのでなく、特定の部分をピンポイントでリセットする方法が主流です。
Webブラウザ本来のスタイリングを残しつつ、部分的に適応させるのが「ノーマライズCSS」という手法です。
例えば、グローバルナビゲーションとしてリストを横に並べたい場合、隙間や行頭のマークが不要になります。
こんな時に、「#nav ul,#nav li{marign:0;padding:0;}」として、部分的にリセットするのです。
このように、各要素のマージン、パディング、フォントサイズなどを微調整できます。
Webサイトで「normalize.css」が配布されていますので、読み込んで使用すると便利です。
◇まとめ◇
- Webブラウザはデフォルトのスタイル情報を持っている
- ブラウザ間のスタイル微調整には、ノーマライズCSSで吸収する
- 新しい手法だけでなく、古い手法も知識として持っておく
