ブラウザの設定を初期化させるCSSとチェックツール：いまさら聞けないCSS／スタイルシート入門（3）（1/2 ページ）
Webブラウザにあらかじめ設定されているスタイルの初期化とボックスモデル、状態を確認するツールとしてFirebugを説明する（編集部）
CSS入門の3回目は、Webブラウザにあらかじめ設定されているスタイルの初期化とボックスモデル、CSSの状態を確認するツールとしてFirebugを分かりやすく説明します。
初心者の方は少し難しい部分もあるかもしれませんが、第1回「ちょっとサイトをステキにするCSSの基本」、第2回「良いデザインを行うためのCSSの下地を作ろう」の連載を読んでいただければ幸いです。
Webブラウザの初期スタイルをなくす
CSSを使ったデザインを行ううえで最初に行わなければならないのが、Webブラウザの初期スタイルをなくすことです。
前回の記事でh1タグについて解説しましたが、そのとき実際Webブラウザには大きいサイズの文字が表示されたと思います。
●スタイルを初期化せずにWebブラウザに表示した結果
|
皆さんもご存じのとおりサイズの大きい文字が表示されましたね。
これがまさに各Webブラウザが持っているh1タグのスタイルです。CSSによるレイアウトデザインには、このWebブラウザ初期スタイルがあると思ったとおりの表現ができませんね!? まずは、これらを初期化（リセット）する必要があります。
初期化作業を行わないとCSSでレイアウトをきれいに組めません。
それでは早速、初期化させた状態のものをWebブラウザで見てみましょう。
●スタイルを初期化してWebブラウザに表示した結果
【XHTMLコード】
<h1>この文字は大きい？小さい？</h1> |
【<head></head>のタグ内のCSSコード】
h1 { |
ご覧のとおりいままで大きかったh1タグに囲まれたテキストが小さくなっています（<head></head>のタグ内のCSSコードでh1タグをを初期化したファイル例）。
これはh1要素に対するタイプセレクタで、marginとpaddingの値を0にし、font-sizeプロパティに100％を設定することにより、従来あるWebブラウザのスタイルを再定義していることになります。
このように、HTMLの各要素がもともと持っているスタイルを初期化してあげましょう。
スタイルの初期化は大きく分けてユニバーサルセレクタ「*」によるやり方と、1つ1つタイプセレクタを指定していくやり方の2つに分かれます。
ユニバーサルセレクタとはアスタリスク記号「*」によりHTMLすべての要素に対してスタイルが適用されます。
●タイプセレクタによる初期化方法
html,body,div,span,h1,h2・・・{ margin:0; padding:0; ・・・ |
●ユニバーサルセレクタによる初期化方法
*
{ margin:0; padding:0; ・・・ |
どちらの初期化方法が優れているとは一概にはいい切れませんが、ユニバーサルセレクタはHTMLすべての要素に対してスタイルが適用してしまうので、細かい調整の多いWeb制作をしている著者はタイプセレクタによる初期化をオススメします。
CSSに慣れないうちや、時間がない場合はユニバーサルセレクタによる初期化でも問題ないでしょう。
参考までに有名なCSSフレームワークはどちらの初期化方法を採用しているのかをコードを見て研究してみてください。
▼Blueprint（MIT License）
●タイプセレクタによる初期化
▼YAML（CC-A 2.0 License)
Copyright © ITmedia, Inc. All Rights Reserved.
注目のテーマ
ITmediaはアイティメディア株式会社の登録商標です。