Normalize.cssを使ったコーディングの注意点とリセットCSSとの違い

  • あとで読みたい人は…

東京でも桜が開花しましたね、@cappeeです。

色々と検証した結果、私も「Normalize.css」を本格導入することにしました。

勘違いしがちなのは、「Normalize.css と リセットCSS どっちがいいの?」ということではなく、この2つはまったく別物なので比較しようがないのです。

Normalize.css を実際使ってみての注意点や、リセットCSSのデメリットなどメモしておきたいと思います。

デフォルトスタイルシート

まず、Normalize.css と リセットCSSを説明する前に知っておきたいのが、ブラウザごとに定義されている「デフォルトスタイルシート」です。

CSSを指定しなくても、hタグやpタグでマークアップすると、タグの意味に合ったデフォルトスタイルシートが効いてmarginだったりテキストが太字になったりします。

だたしデフォルトスタイルシートはブラウザによって差がある(特にIE6, IE7)ため、自分の思ったデザインを適用するのに逆に弊害となったりもします。

リセットCSS とは

デフォルトスタイルシートのブラウザ間の差をなくして、スタイルがゼロの状態からデザインしましょうという考え方でつくられたのが「リセットCSS」です。

私がWeb業界に入った頃は全称セレクター(*)でリセットするのが主流でした。

全称セレクター(*)でのリセット

* {
margin:0;
padding:0;
border:none;
}

その後、Eric Mayer氏が考案したリセットCSSYahoo! CSS Reset (YUI 3)で書かれた要素セレクタごとにリセットする記述が流行りだしました。

要素セレクタでのリセット

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,input,textarea,button,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
ul,ol{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
input,select{vertical-align:middle}

リセットCSSによりデザインの実装は楽になりましたが、必要なデフォルトスタイルシートまでリセットしてしまうことと、フォーム関連で一部表示がおかしくなったりと問題もありました。

例えばulやolタグのスタイルもリセットされてしまうので、矢印のアイコンなどで表現するリストの場合は効率的なのですが、いざ利用規約などで・(中黒)や数字などデフォルトのスタイルも使いたいと言う時にそれ用のcssを結局つくったりなど本末転倒な感じでした。

また、フォーム関連の不具合だと、私がでくわしたのは画像をアップロードする <input name=”" type=”file”> での表示です。このファイルタイプは細かなCSS適用ができないため、リセットCSSにあった input を input[type="text"],input[type="password"] に差し替えて対応しました。

resetcss Normalize.cssを使ったコーディングの注意点とリセットCSSとの違い

このような問題点はあったものの、リセットCSSは5年以上に渡って使われてきたわけですね。

Normalize.css とは

リセットCSSの問題を根っこから改善しようと考えられたのが「Normalize.css」です。

Normalize.css は、ブラウザ間の誤差をなくして補正(ノーマライズ)してくれるだけですので、デフォルトスタイルシートはそのまま適用されます。

Normalize.css が多く使われるようになってきた理由として、スマートフォン用のブラウザも対象であり、HTML5のエレメントなども補正してくれるというのが今の時代にあっているというのがあると思います。

また、css内にはわかりやすくコメントが記載されており、ドキュメントも用意されているので編集が容易であるのも魅力のひとつです。

Normalize.css の読み込み

Normalize.css の公式サイトで最新バージョンをダウンロードして、cssフォルダなどに格納しアップロードします。

<head>タグ内に下記のように記述して Normalize.css を読み込んでください。

<link rel="stylesheet" href="/css/normalize.css" type="text/css" media="all">

サイト毎のスタイルを優先した方がよいので、サイト用のCSSは Normalize.css より下に記述します。

<link rel="stylesheet" href="/css/normalize.css" type="text/css" media="all">
<link rel="stylesheet" href="/css/style.css" type="text/css" media="all">

圧縮版がないかも探してみましたが、現時点での最新バージョン2.1.0は約2ヶ月前に更新されたばかりで少し前の2.0.1バージョンならai11さんが圧縮してくれたものがGithubにありました。
ただしこちらは完全に補正してくれる保証はないので使用は自己責任になりますが、一応紹介。
ai11 / normalize.min.css v2.0.1 MIT License

また、便利なCDNもないかなーと思い探してみましたが、googleのは2011年更新とバージョンが古く残念。アップデート希望。
normalize-css - Google Project Hosting

Normalize.css を使ったコーディングの注意点

Normalize.css を使ってコーディングをしてみて思ったことは、やはりサイトデザインに応じたリセット用のCSSも必要だということ。都度最適な記述方法をする必要があります。

各classやidに直接指定してもいいですし、デフォルトスタイルシートを使わないという場合は必要な要素にリセット用のCSSを記述するのでもいいと思います。

classやidに指定するのが一番コードがシンプルですが、コーディングする場合の注意点もあるので下記のサンプルをご覧ください。

HTML

<h1 class="headline">見出しだよ</h1>

h1の一般的なデフォルトスタイルシート

h1 {
display: block;
margin: 0.67em 0;
font-size: 2em;
font-weight: bold;
page-break-after: avoid;
}

※その他の要素のデフォルトスタイルシートは一番下の[参考サイト]をご覧ください。

classやidに下マージンを指定する場合

.headline {
font-size:116%
margin:0 0 10px;
}

デフォルトスタイルシートがmarginプロパティで指定しているため、margin-bottomで記述すると上マージンはデフォルトのスタイルが適用されてしまいます。
classやidに直接指定する場合は、ある程度デフォルトスタイルシートを頭にいれておかないといけません。スタイルが効かないと勘違いしてしまう可能性があるので注意です。

必要なタグをリセットして下マージンを指定する場合

h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ol,ul,li{margin:0;padding:0;}
.headline {
font-size:116%
margin-bottom:10px;
}

こちらはh1タグを一度リセットしているのでmargin-bottomで記述することができます。
コードは長くなりますが、デフォルトスタイルシートを考慮した記述をする必要がないというのは大きなメリットです。

いずれにしても今主流になりつつある「Normalize.css」ですから、特徴をきちんと理解して今後うまく活用していく必要がありますね。

まとめ

  • Normalize.css と リセットCSS は別物である。
  • デフォルトスタイルシートをゼロの状態にしてデザインしましょうというのが「リセットCSS」。
  • デフォルトスタイルシートをいかしてブラウザ間の誤差だけ補正しようというのが「Normalize.css」。
  • Normalize.css を読み込んでコーディングする場合は、デフォルトスタイルシートの記述も頭に入れておかなければいけない。

[参考サイト]
[CSS]CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About normalize.css
デフォルトスタイルシートから考える、リセットCSSの留意点

Pocket
article clipper Normalize.cssを使ったコーディングの注意点とリセットCSSとの違い

4 thoughts on “Normalize.cssを使ったコーディングの注意点とリセットCSSとの違い

  1. Pingback: スッキリ素早く始めるためのHTMLテンプレート・リセットCSS | panmimi design

  2. Pingback: いまからフルスクラッチでWebサイトをつくるなら是非導入したい4つの基本CSSモジュール | nijilog

  3. Pingback: スタイルシートには別途初期化(ブラウザ表示統一化)用のシートを用意しよう - 35才 絵が下手

  4. Pingback: 講義用資料 | アムズITアカデミー

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>