displayプロパティの説明
CSSの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-typeやlist-style-positionの適用対象になります。この値はinlineやblock、flowやflow-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"と並べて記述します。
displayの使い方とサンプルコード
displayプロパティの構文は以下の通りです。
/* 単一のキーワードを使った指定 */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
/* 複数のキーワードを使った指定 */
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: contents;
display: none;
/* その他の値 */
display: table;
display: table-row;
display: table-cell;
display: list-item;
/* グローバル値 */
display: inherit;
display: initial;
display: revert;
display: unset;
displayの実例
それでは実際にdisplayプロパティの書き方を見ていきましょう。以下の例では、見出しと段落で構成されたブロックレベルの要素をインラインに変えた時の挙動を確認できます。
これは単純な比較ですが、ボックスの余白や改行がインラインになった時にどのように変化するのかを見るのに適した材料です。
<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>
.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: 2px solid #06f;
background: #ffc;
}
#d_inline p {
display: inline;
}
フレックス・ボックス・レイアウト
displayにflexを指定すると、その内容はフレックス・ボックス・モジュール（Flexible Box Module）の仕様に従って配置されます。以下の例は、最も汎用的なマルチカラムのレイアウトをflexで作成したものです。
<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>
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;
}
グリッド・レイアウト
displayにgridを指定すると、その内容はグリッド・レイアウトの仕様に従って配置されます。以下の例は、最も汎用的なマルチカラムのレイアウトをgridで作成したものです。
<div id="container">
<header id="header">Header</header>
<main id="main">Main</main>
<aside id="sidebar">Side</aside>
<footer id="footer">Footer</footer>
</div>
#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;
}