CSS - display

トップ > CSSリファレンス > display

概要

属性名 display
none | inline | block | list-item | inline-block | run-in | compact | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group | flex | inline-flex | <template>
初期値inline
適用可能要素すべての要素
継承継承しない
メディアvisual
アニメーション不可

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
none
inline
block
CSS141171
list-itemCSS161171
inline-blockCSS25.53171
table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
CSS281171
inline-tableCSS283171
run-in
compact
CSS3
(Box)
8?1(*1)
4
32で削除
71(*1)
5
ruby
ruby-base
ruby-text
ruby-base-group
ruby-text-group
ruby-base-container
ruby-text-container
CSS3
(Box)
11?34?
flex
inline-flex
CSS3
(Flexbox)
-2021(-webkit)12.5-

*1 インライン要素よりも前に配置できない。

説明

要素をどのような形式で表示するかを指定します。

説明
noneボックスが生成されず、何も表示されません。
inlineインラインボックスとして表示します。
blockブロックボックスとして表示します。
list-itemリストアイテムとして表示します。
inline-blockインラインボックスの様に前後で改行されず、ブロックボックスの様に高さ、横幅を指定可能なボックス
run-in状況に応じて、後続のブロックの先頭インライン要素になります。
compact状況に応じて、後続のブロックの左余白に表示されるボックスになります。
tableテーブル要素。table 要素に該当します。
table-row-groupテーブルの列グループ。tbody 要素に該当します。
table-header-groupテーブルのヘッダグループ。thead 要素に該当します。
table-footer-groupテーブルのフッタグループ。tfoot 要素に該当します。
table-rowテーブルの列。tr 要素に該当します。
table-column-groupテーブルの行グループ。colgroup 要素に該当します。
table-columnテーブルの行。col 要素に該当します。
table-cellテーブルのセル。th 要素、td 要素に該当します。
table-captionテーブルのキャプション。caption 要素に該当します。
inline-tableインラインテーブル
rubyルビ。ruby 要素に該当します。
ruby-baseルビベース。rb 要素に該当します。
ruby-textルビテキスト。rt 要素に該当します。
ruby-base-group
ruby-base-conainer
ルビベースグループ。rbc 要素に該当します。CSS basic box model (2007-08-09) では ruby-base-group として定義されていますが、CSS Ruby Layout Module Level 1 (2014.08.05) では、ruby-base-container に名称変更されています。
ruby-text-group
ruby-text-container
ルビテキストグループ。rtc 要素に該当します。CSS basic box model (2007-08-09) では ruby-text-group として定義されていますが、CSS Ruby Layout Module Level 1 (2014.08.05) では、ruby-text-container に名称変更されています。
flexフレックスコンテナとして表示します。詳細は flex を参照してください。
inline-flexインラインのフレックスコンテナとして表示します。詳細は flex を参照してください。
<template>CSS3 Advanced Layout Module(Working draft) で検討されていましたが、最新仕様の CSS Template Layout Module(Working Group Note) では gridinline-grid と併用する形式に変更されています。

使用例

◆ inline

下記の例では、div要素をインラインボックスとして横に並べて表示しています。

HTML
<div style="display:inline; color:#ffffff; background:#333333; padding:5px">CSSとは</div>
<div style="display:inline; color:#ffffff; background:#333333; padding:5px">CSSとは</div>
<div style="display:inline; color:#ffffff; background:#333333; padding:5px">CSSとは</div>
表示
CSSとは
CSSとは
CSSとは
◆ block

下記の例では、img要素をブロックボックスとして改行して表示しています。

HTML
<img src="../image/back.gif" alt="" style="display:block">
あいうえお・・・
表示
あいうえお・・・
◆ inline-block

下記の例では、span要素に高さ、横幅を指定しています。

HTML
あいうえお
<span style="display:inline-block; width:100px; height:20px; background:#ccccff; border:1px solid gray;">かきくけこ</span>
さしすせそ
表示
あいうえお かきくけこ さしすせそ
◆ list-item

リストアイテム(li要素)のように表示します。

HTML
<div style="margin-left:2em">
  <div style="display:list-item">HTML</div>
  <div style="display:list-item">CSS</div>
</div>
表示
HTML
CSS
◆ run-in

後続の要素が回り込みや絶対配置されていないブロックボックスであれば、そのブロックボックス内の最初のインラインボックスであるかのように表示されます。

HTML
<h4 style="display:run-in; font-size:12pt; text-decoration:underline; margin-right:3px;">run-in</h4>
<p>後続の要素が回り込みや絶対配置されていないブロックボックスであれば・・・</p>
表示
run-in後続の要素が回り込みや絶対配置されていないブロックボックスであれば・・・

※ 未対応ブラウザが多いため run-in を用いずに擬似的に表示しています。

◆ compact

後続の要素が回り込みや絶対配置されていないブロックボックスであり、後続要素の左マージンの範囲に収まればその箇所に、収まらなければ通常のブロックボックスとして表示されます。Opera 11.6 で動作を確認しています。IE9, Firefox 12, Chrome 18, Safari 5.1 ではまだサポートされていません。

HTML
<h4 style="display:compact; font-size:12pt; text-decoration:underline;">compact</h4>
<p style="margin-left:100px">後続の要素が回り込みや絶対配置されていないブロックボックスであり・・・</p>
表示
compact 後続の要素が回り込みや絶対配置されていないブロックボックスであり・・・
◆ table...

div要素などを、テーブルを構成する要素として扱うことが可能です。

HTML
<style>
.table { display:table; border-collapse:collapse; }
.caption { display:table-caption; text-align:center; font-weight:bold; }
.tr { display:table-row; }
.td { display:table-cell; border:1px solid gray; width:100px; text-align:center; }
</style>

<div class="table">
  <div class="caption">Table.A</div>
  <div class="tr">
    <div class="td">AAA</div>
    <div class="td">BBB</div>
    <div class="td">CCC</div>
  </div>
  <div class="tr">
    <div class="td">AAA</div>
    <div class="td">BBB</div>
    <div class="td">CCC</div>
  </div>
</div>
表示
Table.A
AAA
BBB
CCC
AAA
BBB
CCC
◆ inline-table

インライン要素の様に、横方向に並ぶテーブルを表示することができます。

HTML
<style>
.inline-table { display:inline-table; border-collapse: collapse; }
.inline-table td { border: 1px solid gray; }
</style>

<table class="inline-table">
  <caption>Table.A</caption>
  <tr><td>AAA</td><td>BBB</td></tr>
  <tr><td>CCC</td><td>DDD</td></tr>
</table>
<table class="inline-table">
  <caption>Table.B</caption>
  <tr><td>EEE</td><td>FFF</td></tr>
  <tr><td>GGG</td><td>HHH</td></tr>
</table>
表示
Table.A
AAABBB
CCCDDD
Table.B
EEEFFF
GGGHHH
◆ flex

画面を縦に分割するなどのフレックスコンテナとして表示します。flex-flowflex を参照してください。

CSS
.flexbox {
  display: flex;
}
.flexbox > div {
  flex: 1;
  text-align: center;
  height: 30px;
  border: 1px solid #999;
  background-color: #cfc;
}
CSS
<div class="flexbox">
 <div>A</div>
 <div>B</div>
 <div>C</div>
</div>
表示
A
B
C

関連項目

visibility, display

リンク


Copyright (C) 1997-2015 杜甫々
初版:1997年7月27日、最終更新:2015年11月22日
http://www.tohoho-web.com/css/prop/display.htm