display/CSS/HTMLの基本を学ぶ/ウェブ作成に役立つ情報サイト/It's a long way to the top

display

Home>CSS>プロパティリファレンス>display

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

displayプロパティの役割

displayプロパティは、適用した要素の表示方法を指定します。

displayプロパティに設定できる値

block ブロックレベル要素にする。
compact コンパクトボックスにする。
inline インライン要素にする。
inline-block 行内に配置されるブロックレベル要素にする。
inline-table インラインテーブルにする。(インライン要素)
list-item ブロックレベルボックスにする。li要素の表示と同じ。
none 非表示にする。
run-in ランインボックスにする。
table テーブルにする。(ブロックレベル要素)
table-caption テーブルの表題にする。caption要素と同じ。
table-cell テーブルのセルにする。td要素と同じ。
table-column テーブルの列にする。col要素と同じ。
table-column-group テーブルの列グループにする。colgroup要素と同じ。
table-footer-group テーブルのフッタグループにする。tfoot要素と同じ。
table-header-group テーブルのヘッダグループにする。thead要素と同じ。
table-row テーブルの行にする。tr要素と同じ。
table-row-group テーブルの行グループにする。tbody要素と同じ。
-wap-marquee コンテンツが自動的にスクロールするブロックレベル要素にする。WAP2.0でのみ有効。

コンパクトボックスとは

ブロックレベルボックスが連続して配置され、かつコンパクトボックスにfloatプロパティやpositionプロパティが定めされていない場合、後に続くブロックレベルボックスの余白に収まる大きさであれば、コンパクトボックスは後続のブロックレベルボックスの余白に埋め込まれます。

ランインボックスとは

ブロックレベルボックスが連続して配置された場合、それらにfloatプロパティやpositionプロパティが定められていない場合、そのあとに続くブロックレベルボックスの一番目のボックのように表示されます。

displayプロパティの使い方

<p style="display:inline;background-color:#FF0000;">ブロック要素をインライン要素に変更しました。</p>

ブロック要素をインライン要素に変更しました。

上のサンプルでは、本来ならブロック要素であるp要素をインライン要素にしています。
インライン要素になったことがわかるように、背景色を赤にしました。ブロック要素の場合は、文字がなくてもその要素を配置した一段はすべて要素の領域ということになり、赤くなりますが、インライン要素は、その要素内のコンテンツがある部分までが範囲となるので、テキストが終わるところまでが赤くなります。

関連リンク

よく読まれている記事

UpDate:2010-8-5