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

初期値 inline
適用対象 全ての要素
継承 しない
アニメーション 不可
対応ブラウザ caniuseで確認

displayプロパティの説明

displayは、要素の表示形式を指定します。その要素がフロー・レイアウトの中でどのように振る舞うのか、また内容をどのようなコンテキストでレイアウトするのかを決定します。

要素には内側と外側の表示形式があり、要素自体がブロック要素であるかインライン要素であるかの違いによって、ボックスの配置方法が決まります。この挙動は文書のコンテキスト内において、フロー・レイアウトにどのように参加するのか、という意味があります。

内側の表示形式は、子要素のレイアウトに影響します。それぞれの値は独自の仕様が定義されているため、ブラウザの対応状況をよく確認してから運用して下さい。

displayは、要素の振る舞いを様々な形式に変化させる強力なプロパティです。フレックス・ボックスやグリッド・レイアウトも、このプロパティの宣言から開始します。CSSによるモダンデザインでは必須の機能になるため、各値の特性をしっかりと理解しておきましょう。

displayに指定できる値

<display-outside>グループ

このグループは要素の外側の表示形式を表します。その要素がフロー・レイアウトの中でどのように振る舞うのかを決定します。要素の内側はフロー・レイアウトになります。

block
この値が指定された要素はブロックレベルのボックスを生成します。通常のフローでは、要素の前後で改行を行います。
inline
この値が指定された要素はインラインレベルのボックスを生成します。通常のフローでは、改行を行わずに同じ行に並びます。

<display-inside>グループ

このグループは要素の内側の表示形式を表します。この宣言は要素の内容をレイアウトする祭のコンテキストとなります。

flex
要素はブロック要素として振る舞い、内容をフレックス・ボックス・レイアウトの仕様に従って配置します。
grid
要素はブロック要素として振る舞い、内容をグリッド・レイアウトの仕様に従って配置します。
flow
要素の内側はフロー・レイアウトになります。その要素がブロックまたはインラインを整形するコンテキストに属しており、外側の表示形式がinlineまたはrun-inだった場合、インラインボックスを生成します。そうでブロックコンテナボックスを生成します。
flow-root
要素の内側に新たなブロックレベルのボックスを生成し、ブロック整形コンテキストを開始します。
ruby
要素はインライン要素として振る舞い、内容をルビ・モデルに従って配置します。HTMLの<ruby>と同等の動作です。
table
要素はブロック要素として振る舞い、表構造を包含する役目を示します。HTMLの<table>と同等の動作です。

<display-listitem>グループ

このグループは要素の内側にブロックボックスと、個別のリスト項目のためのインラインボックスを生成します。

list-item
この値を単独で指定すると、要素はリスト項目として振る舞います。そのため、list-style-typelist-style-positionの適用対象になります。この値はinlineblockflowflow-rootと併用することもできます。

<display-internal>グループ

このグループは表やルビなどの複雑な構造を持つ要素の内部を表します。この値は、特定のレイアウトの中でのみ意味を持ちます。

table-caption
HTMLの<caption>のように振る舞います。
table-column
HTMLの<col>のように振る舞います。
table-column-group
HTMLの<colgroup>のように振る舞います。
table-cell
HTMLの<td>のように振る舞います。
table-row
HTMLの<tr>のように振る舞います。
table-row-group
HTMLの<tbody>のように振る舞います。
table-header-group
HTMLの<thead>のように振る舞います。
table-footer-group
HTMLの<tfoot>のように振る舞います。
ruby-base
HTMLの<rb>のように振る舞います。
ruby-text
HTMLの<rt>のように振る舞います。
ruby-base-container
HTMLの<rbc>のように振る舞います。
ruby-text-container
HTMLの<rtc>のように振る舞います。

<display-box>グループ

このグループはボックスの生成や表示に関する挙動を表します。

contents
特定のボックスを生成しないコンテンツとなります。この値が指定された要素は、HTMlの開始タグと終了タグを省略した時のような挙動を示します。その効果は視覚的に描画されるボックス部分にだけ影響します。例えば、背景色や境界線などの装飾は失われますが、属性で与えられた機能は有効のままです。
none
要素を表示しません。子要素を含む全ての内容が画面上から消えます。本来表示されるはずだった要素の寸法は確保されないため、レイアウトに影響を与えません。これを確保しつつ表示だけを制御したい場合は、visibilityを使用して下さい。

<display-legacy>グループ

このグループは旧来の仕様に基づく指定方法です。今後、外側と内側の表示形式の指定を二つのキーワードで明示していく方向へ進みますが、ブラウザの対応状況が整うまでは有効な値となります。

inline-block
ブロックレベルのボックスを生成しますが、インライン要素のようにレイアウトに参加します。新しい形式では、inline flow-rootと並べて記述します。
inline-table
HTMLの<table>と同じような動作を持つインラインボックスとなります。内側のコンテキストはブロックレベルになります。新しい形式では、inline tableと並べて記述します。
inline-flex
要素はインライン要素として振る舞い、内容をフレックス・ボックス・レイアウトの仕様に従って配置します。新しい形式では、inline flexと並べて記述します。
inline-grid
要素はインライン要素として振る舞い、内容をグリッド・レイアウトの仕様に従って配置します。新しい形式では、inline gridと並べて記述します。

contentの使い方とサンプル

contentプロパティの構文は以下の通りです。

CSS
/* 1つの値を使った指定 */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;

/* ボックスの生成や表示 */
display: contents;
display: none;

/* 将来的にメジャーになる指定 */
display: block flow;
display: inline flow;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;
display: inline flow-root;

/* その他の値 */
display: table;
display: table-row;
display: table-cell;
display: list-item;

/* グローバル値 */
display: inherit;
display: initial;
display: revert;
display: unset;

displayの実例

それでは実際にdisplayプロパティの書き方を見ていきましょう。以下の例では、見出しと段落で構成されたブロックレベルの要素をインラインに変えた時の挙動を確認できます。

これは単純な比較ですが、ボックスの余白や改行がインラインになった時にどのように変化するのかを見るのに適した材料です。

表示確認
CSS
.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
}
.samp_box > h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
.samp_box > p {
	margin: 1rem 0 0;
	border: 1px solid #09f;
	background: #9cf;
}
#d_inline p {
	display: inline;
}
HTML
<section class="samp_box">
	<h2>display指定なし</h2>
	<p>段落要素の内容。段落要素の内容。段落要素の内容。</p>
	<p>段落要素の内容。段落要素の内容。段落要素の内容。</p>
	<p>段落要素の内容。段落要素の内容。段落要素の内容。</p>
</section>
<section class="samp_box" id="d_inline">
	<h2>display: inline;</h2>
	<p>段落要素の内容。段落要素の内容。段落要素の内容。</p>
	<p>段落要素の内容。段落要素の内容。段落要素の内容。</p>
	<p>段落要素の内容。段落要素の内容。段落要素の内容。</p>
</section>

フレックス・ボックス・レイアウト

displayflexを指定すると、その内容はフレックス・ボックス・レイアウトの仕様に従って配置されます。以下の例は、最も汎用的なマルチカラムのレイアウトをflexで作成したものです。

表示確認
CSS
div {
	margin-top: 1rem;
	padding: 0 1rem 1rem 1rem;
	border: 1px solid #ccc;
}
#contents {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	gap: 1rem;
	min-height: 200px;
}
#contents > #main {
	flex: 2;
}
#contents > #sidebar {
	flex: 1;
}
HTML
<div id="container">
	<div id="header">Header</div>
	<div id="contents">
		<div id="main">Main</div>
		<div id="sidebar">Side</div>
	</div>
	<div id="footer">Footer</div>
</div>

グリッド・レイアウト

displaygridを指定すると、その内容はグリッド・レイアウトの仕様に従って配置されます。以下の例は、最も汎用的なマルチカラムのレイアウトをgridで作成したものです。

表示確認
CSS
#container {
	display: grid;
	grid-template-columns: auto 30%;
	grid-template-rows: repeat(3, 100px);
	grid-gap: 1em;
}
header,
main,
aside,
footer {
	padding: 1rem;
	background: #eee;
}
header,
footer {
	grid-column: 1 / span 2;
}
HTML
<div id="container">
	<header id="header">Header</header>
	<main id="main">Main</main>
	<aside id="sidebar">Side</aside>
	<footer id="footer">Footer</footer>
</div>

displayに関連するCSSプロパティ

要素の表示や配置方法
bottom 位置指定で配置された要素の底辺からの距離を指定する
break-after ボックスの終了時にページやカラムをどのように区切るかを指定する
break-before ボックスの開始前にページやカラムをどのように区切るかを指定する
break-inside ボックスの途中でページやカラムをどのように区切るかを指定する
clear フロート(float)の回り込みを解除する
clip 要素を切り抜いて可視化する範囲を指定する
box-decoration-break 要素の断片が複数の行やページに渡る場合に装飾の表示の仕方を指定する
display 要素の表示形式を指定する
float 要素を右または左へ寄せて配置する
left 位置指定で配置された要素の左辺からの距離を指定する
overflow 要素からはみ出した内容の表示方法をまとめて指定する
overflow-wrap 長い単語の折り返し方法について指定する
overflow-x 要素からはみ出した内容の水平方向の表示方法を指定する
overflow-y 要素からはみ出した内容の垂直方向の表示方法を指定する
position 要素の配置方法について相対的か絶対的にするかを指定する
right 位置指定で配置された要素の右辺からの距離を指定する
vertical-align ボックス内のインライン要素に縦位置を揃える基準を指定する
visibility 要素の領域を残したまま表示・非表示を指定する
z-index 要素の重なり順序を指定する