HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


要素の種類を指定する

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

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