要素の種類を指定する

display

CSSの書き方

display:値 ;

CSSの詳細情報
プロパティ名 display 読み方 ディスプレイ
初期値 block 意味 要素の種類を選択
block/none/inline…etc(表を参照)
対象 すべての要素
CSSレベル CSSレベル1 対応ブラウザ Windows MAC
継承 しない IE 5.0以上/FF1.0/NS7.1/OP8.0 SF/IE5.0

解説

「display」プロパティは、あらかじめ要素ごとに決まっているブロックレベル要素やインライン要素などの種類を変えることのできるスタイルシートです。

例えば、段落(P)要素はブロックレベル要素ですが、これをインライン要素に変えることもできます。

HTMLの要素の種類については「スタイルシートを書く前に〜インライン要素とブロックレベル要素〜」を、種類別の要素一覧は以下を参照してください。

設定できる値

「display」プロパティで指定できる値は以下の表をご覧ください。

内容
none 要素を生成しない
block ブロックレベル要素にする
inline インライン要素にする
list-item li要素のようなリスト項目にする
marker リストのマーカーにする(before/after擬似要素用)
run-in その要素の後に、floatではなく、かつpositionで位置を指定されていないブロックレベル要素が続く場合は、後に続く要素の先頭にインライン要素として表示される。
そうでない場合は、ブロックレベル要素として表示される
compact その要素の後に、floatではなく、かつpositionで位置を指定されていないブロックレベル要素が続き、そのブロックレベル要素の左マージンの幅以内に、compactを指定する要素の幅が収まる場合は、左マージン内にインライン要素として表示される。
そうでない場合は、ブロックレベル要素として表示される
table ブロックレベル要素の表(HTMLのtable要素)のように表示する
inline-table インライン要素の表(HTMLのtable要素)のように表示する
table-row 表の行(HTMLのtr要素)のように表示する
table-row-group 表の行のグループ(HTMLのtbody要素)のように表示する
table-header-group 表のヘッダーのグループ(HTMLのthead)のように表示する
table-column 表の列(HTMLのcol要素)のように表示する
table-column-group 表の列のグループ(HTMLのcolgroup要素)のように表示する
table-caption 表の表題(HTMLのcaption要素)のように表示する
table-cell 表のセル(HTMLのth/td要素)のように表示する

※引用元:藤本 壱、スタイルシート ポケットリファレンス、技術評論社、P211、2005

ブラウザの対応状況

「display」プロパティは、CSSレベル1のプロパティですが、値によってはWEBブラウザが完全に対応していません。

各値の対応状況については以下の表をご覧ください。

IE 5.0/5.5 IE6.0 NS7.0 FF1.0 OP8.0 SF MAC IE5.0
none
block
inline
list-item ×(※)
marker × × ×
run-in × × × × ×
compact × × × × × ×
table関係 × × ×
※ 箇条書きにはなるが、マーカーが表示されない
△ 書式が効かない場合がある

※引用元:藤本 壱、スタイルシート ポケットリファレンス、技術評論社、P211、2005

CSS/HTMLサンプル

p { display:list-item; }

段落要素をリスト形式にする サンプル

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!