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; }
段落要素をリスト形式にする サンプル