display
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要素をインライン要素にしています。
インライン要素になったことがわかるように、背景色を赤にしました。ブロック要素の場合は、文字がなくてもその要素を配置した一段はすべて要素の領域ということになり、赤くなりますが、インライン要素は、その要素内のコンテンツがある部分までが範囲となるので、テキストが終わるところまでが赤くなります。
関連リンク
- プロパティリファレンス:visibility
- プロパティリファレンス:position
- プロパティリファレンス:float
- プロパティリファレンス:z-index
- プロパティリファレンス:overflow
よく読まれている記事
- 右クリックメニューの表示が遅い【Information】
- 画像の一部にリンクを貼る(クリッカブルマップ【Dreamweaver】
- 一定時間でローテーションする広告【JavaScript】
- Dreamweaver【Dreamweaver】
- クリックした画像を拡大・縮小する【JavaScript】
UpDate:2010-8-5