UIのデフォルトスタイルシートの初期化方法
UIのデフォルトスタイルシートを初期化したほうがよい理由
私はWebページを構築する際、ブラウザのスタイルの初期化を設定する専用のCSSファイルを作成します。
各ブラウザによって、あらかじめスタイルが指定されています。例えば、CSSに手を加えていない状態なのにh1タグの文字が大きいのは、ブラウザのスタイルが適用されているためです。
全てのブラウザのデフォルトスタイルシートが同じであれば問題ないのですが、異なるため、一度リセットしておかないと予期しないレイアウトくずれの原因になります。
そういう理由で、一度CSSの初期化を行います。CSSをリセットしてしまえば、それからCSSを上書きしていけばよいので、ひとつのブラウザだけで確認しても他のブラウザでのレイアウト崩れは起こりにくくなります。（最終的には全てのブラウザで動作確認を行うのが理想ですが。）
ただし、全てのスタイルを初期化してしまえば、全てのセレクタに対して再度スタイルを指定しなければならないので、とても骨が折れることです。そのため、よく考えてスタイルを初期化する必要があります。
全称セレクタの利用
全称セレクタとは全ての要素を対象とするセレクタです。つまり、全称セレクタによって指定されたスタイルは全てのセレクタに適用されるということです。
全称セレクタを利用する利点としては、
- 一括してスタイルを指定することができる
- 全称セレクタは最も低い個別性※（a=0、b=0、c=0、d=0）であるので、どのセレクタも簡単に上書きできる。
※個別性に関しては、以下の記事を参考にしてください。
スタイル適用の優先順位を理解する - CSSデザインノート
よって、全てのセレクタに指定したいスタイルがある場合に便利です。
よく全称セレクタに指定されている要素は以下のとおりです。
CSSコード
* {
margin:0;
padding:0;
}marginとpaddingはブラウザによって最も異なる指定がされており、これらを初期化することは有効ではあります。ただし、全称セレクタは全てのセレクタに適用されてしまうため、上記の場合、ブラウザによってはbuttomタグの中のmarginやpaddingもなくなってしまい、期待しない表示になってしまうこともあり、私はお勧めしません。
私は、全称セレクタにはフォントの種類だけ指定しています。これは、基本的にひとつのサイト内でフォントの種類を変えることがないことを前提としているためです。
CSSコード
* {
font-family:"Hiragino Kaku Gothic Pro",HiraKakuPro-W3,"
ヒラギノ角ゴ Pro W3","MS P ゴシック",verdana, sans-serif;
}アンカーの設定
アンカーの設定は、基本的となる色とテキストのスタイルを決めます。アンカーはコンテンツによって様々なスタイルを適用するので、デフォルトスタイルシートの上書きには、基本的なものの指定で十分でしょう。
CSSコード
a {
color:#0C5F95;
text-decoration:none;
}
a:link {
color:#0C5F95;
text-decoration:none;
}
a:visited {
color:#666;
text-decoration:none;
}
a:hover {
color:#ddd;
text-decoration:none;
}hタグの設定
hタグも設定する場所によって頻繁にスタイルが変更されるものだと思います。marginとpaddingだけ指定して、細かい設定は個別にしていきます。
CSSコード
h1,h2,h3,h4,h5,h6 {
margin:0;
padding:0;
}imgタグの設定
imgタグにはデフォルトスタイルシートでは枠線（border）が指定されていますので、一度リセットします。また、vertical-alignをbottomにしておくと、画像の下に隙間ができてしまうのを防ぐことができます。
CSSコード
img {
border:0;
vertical-align:bottom;
}formタグの設定
formタグはブラウザによって、フォームの上部に空白を作ってしまうものがありますので、marginを0にして、ブラウザの差異をなくしておきましょう。
CSSコード
form {
margin:0;
}ulタグの設定
ulタグはどのブラウザも左側が空いて（インデントされて）表示されると思うのですが、この空白を空けている要素がmarginかpaddingかはブラウザによって異なります。そのため、marginとpaddingを初期化しておきます。
CSSコード
ul {
margin:0;
padding-left:40px;
}
