要素の種類を指定する：スタイルシート（CSS）辞典

要素の種類を指定する

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; }

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

<< 『サイズ/配置/視覚』一覧に戻る

画面のトップへ戻る

スタイルシート辞典メニュー