第25回 各ブラウザーのデフォルトスタイルを揃えるリセットCSSテーブルレイアウトを卒業しよう

各ブラウザーのデフォルトスタイルを揃えるリセットCSS

前回はフォントサイズを揃える方法でしたが、今回はさまざまな要素のデフォルトスタイルを揃えたいと思います。

前回も書いたとおり、ブラウザーは最初からデフォルトスタイルを持っています。さまざまな要素のmargin,paddingなどなどが微妙に違うため、これらを一度すべてリセットをかけて統一し、CSSのコーディングをする人がスタイルを書き直す、というのがリセットCSSの考え方です。

いろいろなリセットCSS

リセットCSSの書き方にはいくつかのバリエーションがあります。

全称セレクタでリセットする

全称セレクタ(ユニバーサルセレクタ)を使って、あらゆる要素を一括で設定する方法です。

* {
margin: 0;
padding: 0;
font-family:
"メイリオ", Meiryo,
"ヒラギノ角ゴ Pro W3",
"HIragino Kaku Gothic Pro W3",
"HIragino Kaku Gothic Pro",
Osaka,
"MS Pゴシック", "MS P Gothic",
sans-serif;
}

例えばこんな感じです。

コードも短くて楽といえば楽ですが、個人的にはあまりオススメではありません。

この方法は「ページ内のあらゆる要素をリセット」するので、逆をいえば「ページ内のあらゆる要素をスタイル」しなくてはいけなくなります。それによりほぼ完 璧にズレのないページは作れるかもしれませんが、デフォルトスタイルのままでもいいような部分までスタイルしなくてはいけなくなります。また、全ての要素 にスタイルを適用するため、レンダリング速度の低下も懸念されます。

限定した要素のみリセットする

全称セレクタであらゆる要素をリセットしてしまうのがまずいのであれば、自分で決めた要素だけリセットすればいいということで、要素を1つ1つ指定する方法です。

html, body,
h1, h2, h3, h4, h5, h6,
div, p, blockquote, pre, address,
ul, ol, li, dl, dt, dd,
table, th, td {
margin: 0;
padding: 0;
font-family:
"メイリオ", Meiryo,
"ヒラギノ角ゴ Pro W3",
"HIragino Kaku Gothic Pro W3",
"HIragino Kaku Gothic Pro",
Osaka,
"MS Pゴシック", "MS P Gothic",
sans-serif;
}

例えばこんな感じです。
リセットしたい要素は追加、したくない要素は削除というようにして、自分でカスタマイズできます。

img {
border: 0;
}

このようにimg要素を追加してもいいですね。

こういったものをまとめてreset.cssとかdefault.cssのような形で用意しておくと、汎用性があって便利ではないかと思います。
参考:第22回 CSSファイルの分割

YUIのReset CSSを使う

前回ご紹介したYUI Libraryでは、フォントのリセットだけではなく、デフォルトスタイルのリセットCSSも公開されています。
考え方は先述の限定した要素のリセットと同じですが、非常に細かな部分まで設定されています。
使い方は前回同様に、下記のようにリンクするだけです。

<!--XHTMLならこっち-->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css" />
<!--HTMLならこっち-->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css">

これをそのままリンクで使ってもいいでしょうし、コードを参考に自分用に最適化したリセットCSSを作ってもいいですね!

では次回もお楽しみに。(こう鈴木 航 (すずきこう)

次のページは…
CSSでボタンのロールオーバーをデザインする【2】
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読