これまで、各ブラウザ間のにおけるデフォルトCSSの差異を一旦全てリセットして、スタイルを初めから指定していきましょうというreset.cssがありましたが、全てをリセットしてしまうことは便利な面もあり、困る場面もありました。それを補う役割として誤差をなくすということを念頭に指定されたNormalize.cssというものがあります。
シンプルなリセットCSSの記述(全称「*」セレクタでリセットする場合)
1 2 3 4 5 |
* { margin: 0; padding: 0; border: none; } |
その後、広がりを見せたのは以下の2つの「リセットCSS」です。
リセットCSSによりデザインの実装に関しては便利になりましたが、必要以上にCSSを初期化してしまう点や、フォーム関連で表示に不具合が出てしまうなどの問題もありました。
例えば、ulやolタグのスタイルもリセットされてしまうので、矢印のアイコンなどで表現するリストの場合は効率的ですが、いざ項目リストなどで、・(中黒)や数字など、デフォルトのスタイルも使いたいという時に、改めてCSSを再度指定したりしなければならなかったりと本末転倒なことがありました。
また、フォームの不具合は、画像をアップロードする<input name=”” type=”file”>での表示など。このファイルタイプは細やかなCSS適用ができないので、リセットCSSにあったinputをinput[type=”text”],input[type=”password”]に差し替えて対応するなどがあります。
Normalize.cssとは?
Normalize.cssは、ブラウザ間の誤差をなくして補正してくれるだけなので、デフォルトのスタイルシートはそのまま適用されます。
Normalize.cssを読み込む
以下から「Normalize.css」をダウンロードします。
<head>何に読み込みます。
1 |
<link rel="stylesheet" href="/css/normalize.css" type="text/css" media="all"> |
サイト用のCSSを優先するべきなので、通常のCSS(style.css)は下に記述します。
1 2 |
<link rel="stylesheet" href="/css/normalize.css" type="text/css" media="all"> <link rel="stylesheet" href="/css/style.css" type="text/css" media="all"> |
Normalize.cssを使用する際の注意点
実際に使ってみると、結局ある程度のリセットCSSを用意した方が便利だと思います。しかしながら、個別にidやclassに直接指定をしていくとデフォルトのCSSの要素も引き継ぐので、デフォルトCSSを念頭に新たにスタイルを指定していかなければならないので厄介ではあります。
現状では、Normalize.cssとある程度の大まかなリセットCSSを記述するのが今のところベストなのかもしれません。