CSSのdisplayプロパティによって、要素のボックスの種類を指定することが出来ます。displayプロパティに用意されている値の詳細は、「CSS2勧告邦訳 9.2.5 'display'プロパティ」を参照。僕の中で使用頻度が多いのは、block、inline、noneあたりでしょうか。
当サイトのヘッダ部分のサイト名は、<h1>で記述（それが妥当かはまた別の話）しておりますが、text-indent: -9999px;によって文字を飛ばしています。ヘッダの背景画像にサイト名をクリップ止めしたような画像を用意し、サイト名の部分をホームへ戻るリンクとしているのですが、そのまま状態だと幅や高さ、位置が合いません。そこで、displayプロパティなどを使い、画像に合わせたクリック領域の指定を行っています。
#banner a {
display: block;
width: 265px;
height: 35px;
text-indent: -9999px;
text-decoration: none;
}
#banner h1 {
padding-left: 65px;
padding-top: 40px;
}#banner aはサイト名のリンクを指定しています。display: block;でブロックボックスを生成し、画像に合わせた幅と高さを指定しています。さらに、位置合わせを#banner h1を指定して、paddingで調整してあります。
話変わって、displayプロパティに用意されている値の中に、tabelなどの表モデルがあります。普通に考えたら、表はtabelタグでマークアップすれば良いんじゃないの？ってなりますが、この値を使用する対象は、表要素が存在しないXMLなどに割り当てるために使います。
blogなんかでは、ページ内にRDFがコメントアウトした状態で埋め込まれています。スキーマとしてダブリンコアで定められているdc:titleなどの要素によってメタデータが記述されているのですが、例えばRDFの内容を表で表現したい場合に、displayプロパティの表モデルを使うことが出来ます。実際の使用例は、The Web KANZAKIさんの「RDFをスタイルシートでテーブルとして表示する」で確認することが出来ます。
Comments