XHTML/CSS・トップ | CSSプロパティ・目次

●要素の表示方法を指定する

 displayは要素の表示形式を指定するプロパティです。指定できる値を表にまとめてあります。すべての要素に指定できますが、子要素に継承はしません。(表関係の値は巻末に記載)

■サンプル↓

【CSS】↓

li {
  display: inline;
}

【HTML】↓

<ul>
 <li>アイテム1</li>
 <li>アイテム2</li>
 <li>アイテム3</li>
</ul>

【解説】↓

 li要素に"display: inline"を指定すると、リスト項目の先頭のマークが消え、かつ、リスト項目が横並びになります。

■displayプロパティ値一覧表

displayプロパティの値
説明
block ブロック要素と同様に表示させる
compact コンパクトボックスとして表示させる
inline インライン要素と同様に表示させる
list-item リスト項目として表示させる
marker リスト項目のマーカーのように表示させる
none 要素を表示させない。ボックスそのものがなくなる
run-in ランインボックスとして表示させる

■補足

 compactの値は、指定したブロック要素をインライン要素として表示します。ただし、指定した要素が長い場合や、あとに続く要素が floatプロパティで指定されている場合、絶対配置などで指定されているときはブロック要素として表示されます。run-inの値は、あとに続くブロック要素の先頭にインライン要素として表示します。ただし、あとに続く要素が floatプロパティで指定されている場合、絶対配置などで指定されているときはブロック要素として表示されます。(従って、一部のケースを除き、run-inの値とcompactの値の違いはほとんどありません。)

■displayプロパティのブラウザ対応表

displayプロパティの値別のブラウザ対応表
block compact inline list-item marker none 表関連の値
ウィンドウズ版IE5.0、5.5 × × × ×
ウィンドウズ版IE6.0以降 × × ×
Mac IE4.5 × × × × × ×
Mac IE5 × × ×
Netscape6以降 × ×
Firefox × ×
Opera6以降 ×

■参考:表関連の displayプロパティの値

table,inline-table,table-row-group,table-column,table-column-group,table-header-group,table-footer-group,table-row,table-cell,table-caption

 XMLでは、表に関する要素があらかじめ定義されておらず、これらを指定することにより、要素を表関連の要素と同じように表示させるために使われます。

XHTML/CSS・目次 | 配置と表示・目次

Copyright (C) 2007 http://www.xml.vc/