CSS displayの使い方を解説 値ごとの違いと実装例

CSSのdisplayは外側の表示型と内側の表示型を決めるプロパティ

CSSの display は、要素自身がページ上でどう振る舞うかと、子要素をどう並べるかを決めるプロパティです。この記事で扱う解説対象は CSSプロパティ です。display: block; のような値は、単に「横幅いっぱいになるか」だけでなく、周囲の要素との並び方や、子要素のレイアウト方法にも影響します。

まず押さえるべき考え方は、外側の表示型と内側の表示型です。外側の表示型は、要素自身が通常フローの中でブロックとして扱われるか、インラインとして扱われるかを決めます。内側の表示型は、子要素を通常フロー、フレックス、グリッドなど、どのレイアウト方式で並べるかを決めます。この考え方を持っておくと、display: inline flex; のような複数キーワード構文も読みやすくなります。

blockは前後で改行される基本の箱

<!-- HTML -->
<span>前のテキスト</span>
<span class="sample-block">display: block;</span>
<span>後のテキスト</span>

/* CSS */
.sample-block {
  display: block;
  width: 100%;
  padding: 10px;
}

display: block; は、要素の前後で改行されるブロックボックスを作ります。見出し、段落、セクション、カードなど、縦に積む要素の基本です。幅や高さを指定しやすく、レイアウトの土台として扱いやすい値です。

inlineは文章の流れに入る表示

/* CSS */
.sample-inline {
  display: inline;
  width: 180px;
  padding: 6px;
}

display: inline; は、文章の一部のように同じ行へ流れます。リンクや強調テキストに向いています。ただし、通常のインライン要素では幅や高さの指定が期待通りに効きません。ボタン風にしたい場合は inline-block や inline-flex を検討します。

inline-blockは横に並びながら幅と高さを持てる

/* CSS */
.sample-inline-block {
  display: inline-block;
  width: 150px;
  padding: 10px;
  text-align: center;
}

display: inline-block; は、外側はインラインのように横へ流れ、内側はブロックのように幅や高さを持てます。小さなボタン、タグ、バッジのように、横並びにしつつサイズを整えたい場面で使いやすい値です。

flow-rootは新しいブロック整形コンテキストを作る

/* CSS */
.sample-flow-root {
  display: flow-root;
  border: 2px solid #2563eb;
}

.sample-float {
  float: left;
  width: 72px;
  height: 72px;
}

display: flow-root; は、新しいブロック整形コンテキストを作ります。floatを使った古いレイアウトの回り込み解除や、外側のレイアウトに影響を漏らしたくない小さなコンテナに向いています。現代の新規レイアウトではflexやgridを使う場面が多いですが、既存CSSの修正では役立ちます。

flexとgridは子要素の並べ方を変えるdisplay値

flex と grid は、要素自身をコンテナにして、子要素の並び方を変える値です。単に横並びにするだけなら display: flex; が扱いやすく、行と列の両方向を設計するなら display: grid; が向いています。どちらも単独で書いた場合、外側はブロックレベルの箱として扱われます。

inline-flex と inline-grid は、外側だけがインライン寄りになります。つまり、コンテナ自体は文章や他のインライン要素と同じ行に流れますが、内側の子要素はflexまたはgridで配置されます。ボタン内部のアイコン整列、短いステータス表示、小さなラベル群に使いやすい値です。

flexは一方向の整列に向いている

/* CSS */
.sample-flex {
  display: flex;
  gap: 10px;
  align-items: center;
}

display: flex; は、子要素を横方向または縦方向に並べるときに使います。ヘッダー、ボタン群、フォーム部品の横並びなど、一方向の整列に向いています。余白は gap、縦位置は align-items で調整すると保守しやすいです。

inline-flexは小さな部品を行内で整列する

/* CSS */
.sample-inline-flex {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

display: inline-flex; は、外側はインライン、内側はflexとして扱います。テキストの途中に置くラベル、アイコン付きリンク、短いステータス表示に向いています。display: inline flex; と同じ意味として扱えます。

gridは二次元の配置に向いている

/* CSS */
.sample-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

display: grid; は、行と列を使って子要素を配置します。カード一覧、ギャラリー、管理画面のパネルなど、二次元の配置を作りたい場面に向いています。横並びだけならflexで足りることが多く、列数や行揃えまで制御したいときにgridを選びます。

inline-gridは小さな格子を行内に置ける

/* CSS */
.sample-inline-grid {
  display: inline-grid;
  grid-template-columns: repeat(2, 42px);
  gap: 6px;
}

display: inline-grid; は、外側はインライン、内側はgridとして扱います。小さな評価表示、ショートカットキー表示、アイコンの小さな集合など、行内に格子状の部品を置きたいときに使えます。通常の大きなレイアウトでは grid、小さな行内部品では inline-grid と考えると判断しやすいです。

none・contents・table・list-itemは表示ボックスの扱いが変わる

display には、単に並べ方を変えるだけでなく、要素のボックス生成そのものに関わる値があります。display: none; は要素と子孫を表示から外し、レイアウト上の領域も取りません。display: contents; は要素自身のボックスを作らず、子要素を親側のレイアウトに参加させます。

table、table-row、list-item は、HTML要素の意味を変えるものではなく、CSS上の表示型を変える指定です。見た目を調整する目的で使えますが、本物の表データにはHTMLの <table>、箇条書きには <ul> や <ol> を使うほうが意味構造としては自然です。

noneは要素をレイアウトから外す

/* CSS */
.sample-none {
  display: none;
}

display: none; は、対象要素を表示せず、レイアウト上の空間も確保しません。子孫要素も表示されません。視覚的に隠すだけでスクリーンリーダーには読ませたい場合は、別の隠し方を検討する必要があります。

contentsは親の箱を作らず子要素だけを参加させる

/* CSS */
.sample-contents {
  display: contents;
}

display: contents; は、要素自身のボックスを生成せず、子要素を周囲のレイアウトに参加させます。ラッパー要素を見た目上消したいときに便利ですが、要素自身の背景、余白、枠線は効きません。また、一部のブラウザー実装ではアクセシビリティツリー上の扱いに注意が必要です。

tableとtable-rowは表のような表示型を作る

/* CSS */
.sample-table {
  display: table;
  width: 100%;
}

.sample-table-row {
  display: table-row;
}

.sample-table-cell {
  display: table-cell;
}

display: table; は、要素を表のような表示型にします。display: table-row; は行の役割を持ち、実用上は table-cell と組み合わせて使うことが多いです。ただし、データ表ならHTMLの表要素を使うほうが意味が明確です。

list-itemはマーカー付きの項目を作る

/* CSS */
.sample-list-item {
  display: list-item;
  margin-left: 24px;
}

display: list-item; は、要素をリスト項目のように表示し、マーカーを生成します。個別の要素にリスト風の見た目を付けたい場合に使えます。ただし、複数の項目を意味のあるリストとして扱うなら、HTML側で <ul> や <ol> を使うほうが自然です。

inherit・initial・revert・revert-layer・unsetはカスケードを制御する値

inherit、initial、revert、revert-layer、unset は、display 専用の値ではなく、CSS全体で使えるグローバル値です。実務では、コンポーネントCSS、リセットCSS、カスケードレイヤーを使っているプロジェクトで見かけることがあります。

display は継承されないプロパティです。そのため、unset は基本的に initial と同じ方向に働き、初期値の inline へ戻す扱いになります。一方で inherit は親の display を明示的に引き継ぎます。revert と revert-layer は、既定値やカスケードレイヤーの影響を戻したいときに使います。

inheritは親のdisplayを引き継ぐ

/* CSS */
.parent {
  display: flex;
}

.child {
  display: inherit;
}

display: inherit; は、親要素の display を引き継ぎます。通常は多用しませんが、親と同じ表示型に揃えたい明確な理由がある場合に使います。親が flex なら子も flex になります。

initialはdisplayの初期値へ戻す

/* CSS */
.sample-initial {
  display: initial;
}

display: initial; は、プロパティの初期値に戻します。display の初期値は inline です。ブロック化された要素を初期状態へ戻したい場合に使えますが、HTML要素ごとのユーザーエージェントスタイルとは別物です。

unsetは非継承プロパティではinitialに近い

/* CSS */
.sample-unset {
  display: unset;
}

display: unset; は、継承されるプロパティなら inherit、継承されないプロパティなら initial のように振る舞います。display は継承されないため、実務上は初期値へ戻す指定として見れば判断しやすいです。

revertとrevert-layerは戻す範囲が違う

/* CSS */
.sample-revert {
  display: revert;
}

.sample-revert-layer {
  display: revert-layer;
}

display: revert; は、現在の指定を取り消し、ブラウザー既定やユーザースタイルなど、カスケード上の前段へ戻すための値です。display: revert-layer; は、現在のカスケードレイヤー内の指定を戻します。レイヤーを使っていない小規模CSSでは出番は少ないですが、設計済みのCSSでは意図的に使われます。

複数キーワードのdisplay構文は外側と内側を分けて読む

複数キーワード構文は、display: block flex; のように、外側の表示型と内側の表示型を分けて書く構文です。block や inline は外側、flow、flow-root、flex、grid は内側の表示型として読みます。従来の inline-flex や inline-grid は、複数キーワード構文で言えば inline flex、inline grid に相当します。

実務では、古い書き方と新しい書き方が混在することがあります。互換性を重視する場合は、従来の単一キーワードを先に書き、その後に複数キーワード構文を書く方法があります。例えば display: inline-flex; の後に display: inline flex; を書けば、対応ブラウザーでは後者が採用され、未対応環境では前者が残ります。

block flexとinline flexの違い

/* CSS */
.block-flex {
  display: block flex;
  gap: 8px;
}

.inline-flex {
  display: inline flex;
  gap: 8px;
}

display: block flex; は、外側がブロック、内側がflexです。通常の display: flex; と同じ方向で考えられます。display: inline flex; は、外側がインライン、内側がflexです。従来の inline-flex と同じ用途で使えます。

block gridとinline gridの違い

/* CSS */
.block-grid {
  display: block grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inline-grid {
  display: inline grid;
  grid-template-columns: repeat(2, 1fr);
}

display: block grid; は、外側がブロック、内側がgridです。display: inline grid; は、外側がインライン、内側がgridです。小さな格子部品を文章中に置きたいなら inline grid、大きなレイアウト領域なら block grid が自然です。

block flowとinline flowは通常フローを明示する

/* CSS */
.block-flow {
  display: block flow;
}

.inline-flow {
  display: inline flow;
}

display: block flow; は、外側がブロック、内側が通常フローです。単一キーワードの display: block; と同じ方向で読めます。display: inline flow; は、外側がインライン、内側が通常フローです。単一キーワードの display: inline; と対応します。

flow-rootの複数キーワードはBFCを明示する

/* CSS */
.block-flow-root {
  display: block flow-root;
}

.inline-flow-root {
  display: inline flow-root;
}

display: block flow-root; は、ブロックとして配置され、新しいブロック整形コンテキストを作ります。display: inline flow-root; は、従来の inline-block と対応する値です。つまり、inline-block を外側と内側に分解して読むと inline flow-root になります。

まとめ

display は、要素自身の並び方と、子要素のレイアウト方法を決める重要なCSSプロパティです。縦に積むなら block、文章の流れに入れるなら inline、横に並べつつ幅や高さを持たせるなら inline-block を使います。floatの影響を閉じたい場合は flow-root が候補になります。

子要素の配置を変えるなら、一方向の整列は flex、二次元の配置は grid です。行内に小さなflexやgridを置くなら inline-flex、inline-grid を使います。非表示には none、ラッパーの箱だけを消したい場合は contents が使えますが、アクセシビリティや背景・余白・枠線が効かない点に注意が必要です。

複数キーワード構文は、値を外側と内側に分けて読むための構文です。display: inline flex; は「外側はインライン、内側はflex」、display: block grid; は「外側はブロック、内側はgrid」と考えると理解しやすくなります。実務では、まず単一キーワードで必要な表示を作り、設計意図を明確にしたい場面で複数キーワード構文を読む、または併記するのが扱いやすいです。