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
アニメーション	不可
サポート	基本 : https://caniuse.com/mdn-css_properties_display list-item : https://caniuse.com/mdn-css_properties_display_list-item run-in : https://caniuse.com/run-in contents : https://caniuse.com/css-display-contents table : https://caniuse.com/css-table ruby : https://caniuse.com/mdn-css_properties_display_ruby_values flow : https://caniuse.com/flow-root flex : https://caniuse.com/flexbox grid : https://caniuse.com/mdn-css_properties_display_grid

説明

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

値	説明
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-root	float によるテキストの回り込みを解除します。
flex	フレックスコンテナとして表示します。詳細は flex を参照してください。
inline-flex	インラインのフレックスコンテナとして表示します。詳細は flex を参照してください。
grid	グリッドスコンテナとして表示します。詳細は grid を参照してください。
grid-flex	インラインのグリッドコンテナとして表示します。詳細は grid を参照してください。
<template>	CSS3 Advanced Layout Module(Working draft) で検討されていましたが、最新仕様の CSS Template Layout Module(Working Group Note) では grid や inline-grid と併用する形式に変更されています。

使用例

none

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

.memo { display: none; }

<button id="show">Show</button>
<button id="hide">Hide</button>
<div id="memo" class="memo">メモ.メモ.メモ...</div>

(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 要素をインラインボックスとして表示しています。

.inline { display: inline; }

<div class="inline">This is a pen.</div>
<div class="inline">That is an apple.</div>

block

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

.block { display: block; }

<img class="block" src="../image/back.gif" alt="Sample image">
あいうえお・・・

inline-block

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

.inline-block {
  display: inline-block;
  width: 5rem;
  background-color: #999;
  text-align: center;
  color: #fff;
}

<div class="inline-block">Red</div>
<div class="inline-block">Green</div>
<div class="inline-block">Blue</div>

run-in

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

.run-in {
  display: run-in;
  color: #fff;
  background-color: #666;
  padding: 0 .5rem;
}

<div style="width:13rem">
 <div class="run-in">run-in</div>
 <div>後続の要素が回り込みや絶対配置されていないブロックボックスであれば...</div>
</div>

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

list-item

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

.list > * {
  display: list-item;
  margin-left: 1.3rem;
}

<div class="list">
  <div>HTML</div>
  <div>CSS</div>
</div>

contents

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

.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;
  border: 1px solid #999;         /* 効かない */
}

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

table

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

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

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

inline-table

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

.inline-table { display:inline-table; border-collapse: collapse; }
.inline-table td { border: 1px solid gray; padding: 0 .5rem; }

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

ruby

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

.ruby { display: ruby; }
.rb { display: ruby-base; }
.rt { display: ruby-text; font-size: 80%; }

<div class="ruby">
  <span class="rb">紫陽花</span>
  <span class="rt">あじさい</span>
</div>

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

flow-root

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

.flow-root { display: flow-root; }
.float { float: left; margin-right: .5rem; }

<div class="flow-root">
  <img class="float" src="image/sample.png" alt="Sample image">
  昔、昔、あるところに大きな雪だるまが...
</div>
clearfixがとても簡単になりました。

flex

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

.flexbox {
  display: flex;
}
.flexbox > div {
  flex: 1;
  text-align: center;
  height: 30px;
  border: 1px solid #999;
  background-color: #cfc;
}

<div class="flexbox">
 <div>A</div>
 <div>B</div>
 <div>C</div>
</div>

grid

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

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

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

関連項目

visibility

リンク

• https://developer.mozilla.org/ja/docs/Web/CSS/display
• https://w3c.github.io/csswg-drafts/css-display/#the-display-properties

---