[CSS]スタイルの初期化(後編) -body内の個別タグ編

Post on:2007年3月21日

スタイルの初期化 -テーブル関連

テーブル関連では、table、th、td、caption の初期化を行います。

table{
  border-collapse:collapse;
  border:none;
  border-spacing:0;
}
th,td{
  vertical-align:top;
  border:solid 1px #000;
  font-weight:normal;
  text-align:left;
}
caption{
  text-align:left;
}

tableには、IEでも1pxのborderになるように「border-collapse: collapse;」の指定をします。

thとtdには、border（色は#000）、テキストの行揃え、thの太字表示を指定します。

captionには、th, tdと同様にテキストの行揃えを指定します。

スタイルの初期化 -リスト関連

リスト関連は、ul、ol、dlの初期化を行います。

ul,ol,dl{
  list-style:none;
}
li{
  display:list-item;
  zoom:normal;
}

ul, ol, dlのlist-styleは別途指定を行うため、「list-style:none;」を指定します。
これは、ナビゲーションなど画像をリスト要素とする場合が多いため、この指定で初期化を行います。

liへの指定は、全称セレクタに「zoom:1;」の指定を行った場合に起きるリストマークの不具合を修正する指定です。

スタイルの初期化 -画像・オブジェクト関連

画像・オブジェクト関連は、img、object、embedです。
embedはXHTMLでは定義されていませんが、更新を別の方が担当する場合もあるため、Validにするよりもメンテナンシビリティを優位にとっています。

img,a img{
  vertical-align:bottom;
  border:none;
  background:transparent;
}
object,embed{
  vertical-align:top;
}

imgへの指定は、リンク要素とした場合のborderの非表示とテキストなどと並べた際に天地がずれることを解消するものです。

objectとembedにも、表示位置の調整をしています。

スタイルの初期化 -フォーム関連

フォーム関連は、fieldset、input、textareaに初期化を行います。

fieldset{
border:none;
}
input,textarea{
font-size:1em;
}

fieldsetへの指定は、borderを非表示に指定します。

input、textareaには、「font-size:1em;」の指定をしています。

スタイルの初期化 -テキスト関連

テキスト関連は、主にテキスト要素に使用するタグで、ここではem、address、dfnに指定します。
※これらのタグにテキスト要素以外を使用することもできます。

em,address,dfn{
font-style:normal;
}
ul ul,ul dl,dl ul,table p,table ul,table table{
font-size:1em;
}

em, address、dfnは多くのブラウザで斜体に表示されるため、初期化を行います。
英語であれば斜体は有益だと思いますが、日本語だといまいちだと思います。

「ul ul」などへの指定は、font-sizeの指定に%を使用することが多く、これらのタグを入れ子で使用している場合、フォントサイズも入れ子指定で小さくなってしまうことを防止するためです。
タグの入れ子のパターンはこのくらいで充分かと思いますが、必要があれば増やします。

テキスト関連で使用する他の、見出し（hn）、パラグラフ（p）、改行（br）、引用（blockquote, q）、整形済みテキスト（pre）、強調（strong）、省略語（abbr）、頭字語（acronym）、追加文（ins）、削除文（del）、上付文字（sup）、下付文字（sub）などには、特別な初期化の指定は行いません。

スタイルの初期化 -その他

その他として、hrに初期化を行います。

hr{
  height:0px;
  margin:7px 0;
  border:none;
  border-top:1px solid #000;
}
* html hr{/* for -IE6 */
  margin:0;
}
*:first-child+html hr{/* for IE7 */
  margin:0;
}

hrは、実際のレイアウト要素としてはあまり使用しませんが、ページ内の要素の段落ごとの区切りとして使用しています。
そのため、「border:none;」と非表示をデフォルトとしていますが、実線として使用したい場合（確認時など）もあるので、#000の1pxで表示できるように指定を記述しています。

IE用にmarginを記述しているのは、確認時に数値を変更したりするためです。
「margin:0;」自体には意味はありません。