トップページ > TIPS > CSSスタイル初期化

CSSレイアウト[TIPS]

CSSスタイル初期化

CSSでレイアウトを組む時、
まず最初にブラウザのデフォルトスタイルをリセットすることが必要になる。

ブラウザは、あらかじめデフォルトのスタイルが決められていて、CSS指定なしのHTMLでも、そのままでサマになり読みやすいようにしてある。
例えばhx要素には文字の大きさやマージンが決められている。リスト要素にもマージンがある。

しかし、hx要素に画像を当てはめたり、リストをメニューボタンとして使う時などに、このデフォルトのスタイルがデザイン上の邪魔になる場合が多い。そのために、まずはデフォルトスタイルのリセットをする。

リセットの方法の中で、ユニバーサルセレクタを使う方法とグループセレクタを使う方法をまとめる 。

ユニバーサルセレクタ

ユニバーサルセレクタは、「*(アスタリスク)」をセレクタとして指定する方法。
「*」は、html, bodyを含む「すべての要素」を示すセレクタ。 「*」にスタイル指定をすれば、すべての要素にスタイルを適用させる事ができる。

* {
margin:0;
padding:0;
}
そこで本サイトでは、左記のように「*」を使って、すべての要素のデフォルトのmarginやpaddingをとっておく指定をしている。
（base.cssを確認したい場合→CSS_Layout/css/base.css）

この記述はショートハンドで「marginは上下左右0、paddingも上下左右0」という意。
ショートハンドに関する詳細は→TIPS「CSSのショートハンド」を参照に。

ユニバーサルセレクタを使う方法では、次のような弱点があると言われている。
[1] すべての要素を対象にする⇒あとで個別に全要素に指定し直さなければならない。
[2] レンダリングの速度が遅くなると言われている。
[3] あるブラウザのバージョンによっては意味を理解してくれない。

個人的には、「margin」「padding」を0にするくらいの使用なら、[1]は別に苦痛でもないし、[2]も該当しないように思う。「border : 0」や「font-size」など、色々と指定すると遅くなりそうだが。

※ちなみに「border : 0」を指定すると「フォームのボタン」のブラウザのデフォルトデザインが崩れるそうだ。フォームボタンのデザインがデフォルトでOKなら、borderは「*」でリセットしないほうが無難。
ページの最上部へ

グループセレクタ

特定のセレクタを「, (カンマ)」で区切りながら並べて、グループにして指定する方法。
自分のデザインに合わせて、リセットが必要な要素だけをチョイスできる。

下記はその一例。
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote,
a, address, img, dl, dt, dd, ol, ul, li, form, label, table, tr, th, td
{
margin: 0;
padding: 0;
}
また、リスト要素をメニューボタンに使う場合は下記のリセットも必要。
ol, ul { list-style: none; }

要素がブラウザ指定のスタイルで良いのであれば、わざわざ初期化する必要はない。
ブラウザのデフォルトスタイルをそのまま使用したい場合には、ユニバーサルセレクタでなくこちらのグループセレクタを使う方が編集しやすい。

例えば、リストを本来のリストとして使用し、ブラウザに依存するマージンがあった方がいい場合などには、「*」で初期化していると、再建が面倒。
ページの最上部へ