[CSS]スタイルの初期化(前編) -全称セレクタとhtml, body編

Post on:2007年3月20日

CSSのスタイルの初期化が必要な理由

HTMLの各タグは、ブラウザごとに初期スタイルが異なり、スタイルシートでレイアウトを行う際、ブラウザごとに異なる指定を行わないと期待通りのレイアウトを再現しない場合があります。
そのため、同一のスタイル指定で意図したレイアウトが再現できるように、このブラウザごとのスタイルの差異を無くすスタイルシートの設定を行います。

対象としているブラウザは、最近の僕の受注案件の多くは下記のブラウザが対象になっているため、これらを対象に策定しています。

Windows

IE 6以上
Firefox 1.5以上
Opera 8以上

Mac OS

Safari 2以上
Firefox 1.5以上

スタイルの初期化 -全称セレクタ（*）

全称セレクタ（*）には、marginとpadding、zoomの指定をしています。

*{
  margin:0;
  padding:0;
  zoom:1;
}

marginとpaddingの指定は、bodyにpaddingがついているブラウザ（Opera）や、リスト要素などmarginの値が異なるためです。

zoomの指定は、IEのhasLayout対策です。
hasLayoutについては、下記のエントリを参照ください。

IEでのCSSのバグを回避するhasLayout
[コリス]

スタイルの初期化 -html, body

htmlとbodyに指定しているのは、フラッシュなどを100%で配置した場合やページ内の要素が少ない際の縦スクロールバーの表示に関係したものです。

html{
  height:100%;
}
html>/**/body{
  overflow:-moz-scrollbars-vertical;
}
html:first-child body{
  min-height:100%;
  padding-bottom:1px;
}

htmlへの指定は、Firefoxでswfなどを縦100%でレンダリングさせる場合、「height:100%;」が必要になります。

bodyへの指定は、ページ内の要素が少ない場合、IEのみ縦スクロールバーの領域が表示され、その他のFirefoxやOperaなどでは縦スクロールバーの領域が表示されないことを解消するためのものです。
※ページごとに縦スクロールバーの有る無しでレイアウトの横位置がずれてしまうため。

「overflow:-moz-scrollbars-vertical;」は、Firefoxで縦スクロールバーの領域を表示させるためです。

追記：

2008年4月10日: 上記の指定を行うと横スクロールバーが非表示になります。
参考：Firefoxで「overflow:-moz-scrollbars-vertical;」の指定は危険

「min-height:100%;padding-bottom:1px;」はOperaのための指定です、要素の下に1pxのpaddingを指定し、縦スクロールバーを強引に表示させます。
縦スクロールバーの対策方法としては美しくありませんが、表示が横にずれてしまうのと、1px余計に縦スクロールがあるのを天秤にかけた場合、後者を採用しています。

スタイルの初期化 -全称セレクタとhtml, body のメモ

全称セレクタへの指定は、去年頃から同様の指定をHTMLのそれぞれのタグを明示して指定する方法が流行っていますが、それによる効果よりも記述の簡易さ・管理のしやすさを優先にし、全称セレクタでの指定を採用しています。
「overflow:-moz-scrollbars-vertical;」の指定は、「overflow-y:scroll;」と指定しても同様の効果があります。
Firefox限定のため、好みで「moz」を採用しています。
Operaで、レイアウトの下の余白を無くしたい場合や、サイトの全ページが短くない場合は、「padding-bottom:1px;」は美しくないので、はずしています。
全称セレクタやhtml, body でのスタイルの初期化には、backgroundやfontの指定は行いません。
これは、ページごとに背景を変更する場合や、１つの言語のみのサイトではない場合が大きな理由ですが、汎用性が無いため初期化の指定には入れる必要がないと思います。