CSS - display

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

概要

属性名 display
none | inline | block | inline-block | run-in | list-item | contents |
table | inline-table | table-caption |
table-header-group | table-row-group | table-footer-group |
table-row | table-cell | table-column-group | table-column |
ruby | ruby-base | ruby-text | ruby-base-container | ruby-text-container |
flow | flow-root |
flex | inline-flex |
grid | inline-grid
初期値要素に応じて変わる
適用可能要素すべての要素
継承継承しない
メディアvisual
アニメーション不可
サポート

説明

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

説明
none何も表示されません。
inlineインラインボックスとして表示します。
blockブロックボックスとして表示します。
inline-blockインラインボックスの様に前後で改行されず、ブロックボックスの様に高さ・横幅を指定可能な要素として表示します。
run-in状況に応じて、後続のブロックの先頭インラインボックスになります。
list-itemリストアイテムとして表示します。
contents指定した要素をDOMリストから除外します。
tableテーブル要素。table 要素に該当します。
inline-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 要素に該当します。
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 に名称変更されています。
flow外側の表示種別が inline または run-in であり、またブロックまたはインラインの整形コンテキストに関係する場合は、インラインボックスを生成します。そうでない場合は、ブロックコンテナーボックスを生成します。
flow-rootfloat によるテキストの回り込みを解除します。
flexフレックスコンテナとして表示します。詳細は flex を参照してください。
inline-flexインラインのフレックスコンテナとして表示します。詳細は flex を参照してください。
gridグリッドスコンテナとして表示します。詳細は grid を参照してください。
grid-flexインラインのグリッドコンテナとして表示します。詳細は grid を参照してください。
<template>CSS3 Advanced Layout Module(Working draft) で検討されていましたが、最新仕様の CSS Template Layout Module(Working Group Note) では gridinline-grid と併用する形式に変更されています。

使用例

◆ none

要素を非表示にします。JavaScript で要素の表示・非表示を切り替えたりします。

CSS
.memo { display: none; }
HTML
<button id="show">Show</button>
<button id="hide">Hide</button>
<div id="memo" class="memo">メモ.メモ.メモ...</div>
JavaScript
(function() {
  window.addEventListener("load", function() {
    document.getElementById("show").addEventListener("click", function() {
      document.getElementById("memo").style.display = "block";
    });
    document.getElementById("hide").addEventListener("click", function() {
      document.getElementById("memo").style.display = "none";
    });
  });
})();
表示
メモ.メモ.メモ...
◆ inline

文章中に出現するような前後に改行が行われないのがインラインボックスです。下記の例では、本来はブロックボックスである div 要素をインラインボックスとして表示しています。

CSS
.inline { display: inline; }
HTML
<div class="inline">This is a pen.</div>
<div class="inline">That is an apple.</div>
表示
This is a pen.
That is an apple.
◆ block

前後で改行が行われるのがブロックボックスです。下記の例では、本来はインラインボックスである img 要素をブロックボックスとして表示しています。

CSS
.block { display: block; }
HTML
<img class="block" src="../image/back.gif" alt="Sample image">
あいうえお・・・
表示
Sample image あいうえお・・・
◆ inline-block

inline の代わりに inline-block を指定すると width で横幅を指定できるようになります。

CSS
.inline-block {
  display: inline-block;
  width: 5rem;
  background-color: #999;
  text-align: center;
  color: #fff;
}
HTML
<div class="inline-block">Red</div>
<div class="inline-block">Green</div>
<div class="inline-block">Blue</div>
表示
Red
Green
Blue
◆ run-in

後続の要素が回り込みや絶対配置されていないブロックボックスであれば、そのブロックボックス内の最初のインラインボックスであるかのように表示されます。Chrome 4~31 や Safari 3.1~6 等でサポートされていましたが、現在ではサポートを中止しているブラウザが大半のようです。

CSS
.run-in {
  display: run-in;
  color: #fff;
  background-color: #666;
  padding: 0 .5rem;
}
HTML
<div style="width:13rem">
 <div class="run-in">run-in</div>
 <div>後続の要素が回り込みや絶対配置されていないブロックボックスであれば...</div>
</div>
表示
run-in 後続の要素が回り込みや絶対配置されていないブロックボックスであれば...

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

◆ list-item

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

CSS
.list > * {
  display: list-item;
  margin-left: 1.3rem;
}
HTML
<div class="list">
  <div>HTML</div>
  <div>CSS</div>
</div>
表示
HTML
CSS
◆ contents

下記の例では二つのアーティクルを左右に並べ、タイトルの高さ、本文の高さをそろえています。こうしたレイアウトは h2 や p や div がグリッドの直接の子要素であればうまく制御することができますが、article の子要素(グリッドの孫要素)となるとうまく制御できません。article 要素に display: contents を指定すると、article 要素は DOM ツリーから削除されたように振る舞い、h2, p, div 要素がグリッドの子要素として振舞うようになります。

CSS
.grid-contents {
  width: 32rem;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 20px;
}
.grid-contents article {
  display: contents;
}
HTML
<div class="grid-contents">
  <article>
    <h2>2001年宇宙の旅</h2>
    <p>人類に知恵を与えた石板(モノリス)。月で発見された...</p>
    <div class="author">著:アーサー・C・クラーク</div>
  </article>
  <article>
    <h2>アンドロイドは電気羊の夢を見るか</h2>
    <p>デッカードが脱走したアンドロイドを追います。「ブレードランナー」のタイトルで映画化されました。</p>
    <div class="author">著:フィリップ・K・ディック</div>
  </article>
</div>
表示

2001年宇宙の旅

人類に知恵を与えた石板(モノリス)。月で発見されたモノリスは木星に信号を送信。その謎を追ってボーマン船長が宇宙船ディスカバリー号で木星に向かいます。

著:アーサー・C・クラーク

アンドロイドは電気羊の夢を見るか

デッカードが脱走したアンドロイドを追います。「ブレードランナー」のタイトルで映画化されました。

著:フィリップ・K・ディック
◆ table

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

CSS
.table { display: table; border-collapse:collapse; }
.caption { display: table-caption; text-align: center; font-weight: bold; }
.tr { display: table-row; }
.th, .td { display: table-cell; border: 1px solid gray; width: 100px; text-align: center; }
.th { font-weight: bold; }
HTML
<div class="table">
  <div class="caption">Table.A</div>
  <div class="tr">
    <div class="th">AAA</div>
    <div class="th">BBB</div>
    <div class="th">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

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

CSS
.inline-table { display:inline-table; border-collapse: collapse; }
.inline-table td { border: 1px solid gray; padding: 0 .5rem; }
HTML
<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
◆ ruby

ルビを振ります。詳細は ruby を参照してください。Firefox と IE しか対応していないようです。

CSS
.ruby { display: ruby; }
.rb { display: ruby-body; }
.rt { display: ruby-text; font-size: 80%; }
HTML
<div class="ruby">
  <span class="rb">紫陽花</span>
  <span class="rt">あじさい</span>
</div>
表示
紫陽花 あじさい

※ 未対応ブラウザが多いため <ruby> を用いて表示しています。

◆ flow-root

float を用いたテキストの回り込みを行う場合、回り込みを解除するために clearfix という技を利用する必要がありましたが、親要素に flow-root を指定することにより簡単に回り込みの解除ができるようになりました。

CSS
.flow-root { display: flow-root; }
.float { float: left; margin-right: .5rem; }
CSS
<div class="flow-root">
  <img class="float" src="image/sample.png" alt="Sample image">
  昔、昔、あるところに大きな雪だるまが...
</div>
clearfixがとても簡単になりました。
表示
Sample image 昔、昔、あるところに大きな雪だるまが...
clearfixがとても簡単になりました。
◆ 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
◆ grid

グリッドを表示します。詳細は grid を参照してください。

CSS
.grid-container {
  display: grid;
  grid: 3rem 3rem / 4rem 4rem 4rem 4rem;
}
.grid-container > * {
  border: 1px solid #ccc;
  text-align: center;
}
.itemA { grid-row: 1 / 2; grid-column: 1 / 2; }
.itemB { grid-row: 2 / 3; grid-column: 1 / 2; }
.itemC { grid-row: 1 / 3; grid-column: 2 / 3; }
.itemD { grid-row: 1 / 2; grid-column: 3 / 5; }
.itemE { grid-row: 2 / 3; grid-column: 3 / 4; }
.itemF { grid-row: 2 / 3; grid-column: 4 / 5; }
CSS
<div class="grid-container">
  <div class="itemA">A</div>
  <div class="itemB">B</div>
  <div class="itemC">C</div>
  <div class="itemD">D</div>
  <div class="itemE">E</div>
  <div class="itemF">F</div>
</div>
表示
A
B
C
D
E
F

関連項目

visibility

リンク


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