【display】ブロックレベル・インラインなどの表示形式を指定

displayプロパティでは、要素をブロックレベルやインラインなどにしたり、要素の表示形式の指定をする事ができます。 またブロックレベル、インラインの他、リスト形式にしたり非表示にするなど、要素をどのように表示するか指定することが可能です。

なおdisplayプロパティでa要素をブロックレベルに指定すると、そのリンク領域が包含ブロックの横幅いっぱいに広がり、テキストをクリックせず余白部分をクリックしてもリンクとして機能するようになります。(リンクボタンのようになる)

書式

  • display : ……… 要素の表示形式を指定する

★:inline、block、inline-block、inherit、他下記参照

inline
インライン要素にする
block
ブロックレベル要素にする
inline-block
インラインレベルのブロック要素(インラインブロック)にする。この値を指定した要素はインラインのように配置されるが、要素自体はブロックレベルのようになっている。
list-item
指定した要素に対し、ブロックレベルのボックスとリスト項目のマーカー用のボックスを生成する。(li要素のようになる)
none
指定した要素を表示しない。要素を見えないようにするわけではなく、ボックス自体を生成しないためレイアウトに影響を与えない。またその要素に含まれるすべての要素も同じ状態となる。

table関連

table
table要素のように表示(ブロックレベル)
inline-table
table要素のように表示(インライン)
table-caption
caption要素のように表示
table-row
tr要素のように表示
table-cell
th、td要素のように表示
table-header-group
thead要素のように表示
table-row-group
tbody要素のように表示
table-footer-group
tfoot要素のように表示
table-column-group
colgroup要素のように表示
table-column
col要素のように表示

table関連の値は、xml(テーブルに関する要素が定義されてない言語)などでHTMLのテーブル関連の要素と同じ表示形式にするために使用します。

使用した時の例

.sample1 {display:inline;}
.sample2 {display:block;}
.sample3 {display:list-item;}
<div class="sample1">divをinline</div>
<div class="sample1">divをinline</div>

<span class="sample2">spanをblock</span>

<span class="sample3">list-item</span>
<span class="sample3">list-item</span>

ブラウザ上の表示例

divをinline
divをinline
spanをblock list-item list-item

対応ブラウザなどのデータ

初期値 inline 値の継承 継承しない
適用可能な要素 すべての要素
メディア visual
対応ブラウザ 【none、inline、block】Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera7~ , Safari1~
【list-item】Internet Explorer6~ , Google Chrome1~ , Firefox1~ , Opera7~ , Safari1~
【inline-block】Internet Explorer5.5~ , Google Chrome1~ , Firefox3~ , Opera7~ , Safari1~
【table関連】Internet Explorer8~ , Google Chrome1~ , Firefox1~ , Opera7~ , Safari1~

関連情報