CSSのdisplayを図解：block・inline・flex・gridなどの表示の違いと実例

display は「要素自身が周囲とどう並ぶか」と「その子をどう配置するか」を決めます。position が配置の基準を決めるのに対し、display は箱の作り方とレイアウト方式を選びます。図とサンプルで、前後の要素と内部のA・B・Cを見比べましょう。

外側の並び方と内側の配置を分けて理解する

外側はblockかinlineか

通常フローで block の箱は前後に改行を伴い、inline の箱は文章の行へ参加します。ただし、Flex・Gridアイテムになっている場合などは親のレイアウト方式にも左右されます。以下の図は、特に記載がない限り通常の横書きのフローでの比較です。

内側はflow・flex・gridなど

flex は外側がブロック、内側がFlexboxです。inline-flex は外側がインラインの箱、内側がFlexboxになります。grid と inline-grid も同じ関係です。親自身が横に並ぶことと、親の中の子が横に並ぶことを混同しないのが重要です。

displayの13種類を切り替える比較サンプルを開く

サンプルでは、対象の前に「前」、後ろに「後」を置いています。値を切り替えたら、前後の改行、対象の幅・高さ、A・B・Cの配置を順番に確認してください。浮動要素を含む flow-root と、表の内部値には別の実例も用意しています。

block・inline・inline-blockの違い

block：前後に改行を伴う箱

width: auto の通常のブロックは、一般に利用可能な横幅を使います。図とサンプルでは幅を指定しているため、箱は親の幅いっぱいではありません。それでも後続の「後」は次の行に来ます。

.target {
  display: block;
  width: 240px;
  height: 116px;
}

inline：文章の流れに入る

通常の span などの非置換インライン要素では、width と height を指定しても箱の寸法を固定できません。内容が長いと行をまたぎます。上下の margin はブロックと同じようには効かず、上下の padding や境界線を大きくすると周囲の行へ重なる場合があります。画像などの置換要素は別の寸法規則を持ちます。

.target {
  display: inline;
  width: 240px;  /* 通常のspanには適用されない */
  height: 116px; /* 通常のspanには適用されない */
}

inline-block：行の中に寸法を持つ箱を置く

inline-block は行に参加するひとまとまりの箱です。幅と高さを指定でき、内部にはブロック整形コンテキストを作ります。ボタンやラベルのような小さな箱に向きます。HTML内の空白が箱の間隔になることがあり、縦方向の並びは vertical-align の影響を受けます。

.target {
  display: inline-block;
  width: 240px;
  height: 116px;
  vertical-align: top;
}

flex・inline-flex：子を1方向に配置する

flexは外側がブロック、内側がFlexbox

直接の子がFlexアイテムになります。既定の flex-direction: row では、横書きなら横方向に並びます。column なら縦方向です。flex-wrap で折り返しても、各行の幅配分は独立しており、列を全行で共有するGridとは異なります。

.target {
  display: flex;
  gap: 8px;
  align-items: center;
}
.item { flex: 1; }

inline-flexは外側だけインラインの箱

子の並び方はFlexboxのままです。違いは対象自身が「前」「後」と同じ行へ参加する点です。小さなアイコンと文字をまとめたラベルなどに使えます。幅が行に収まらなければ、箱全体が次の行へ回ることがあります。

.target {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

grid・inline-grid：行と列をそろえる

gridは列の幅を明示して比較する

display: grid だけでは、自動的に3列になるわけではありません。例では grid-template-columns で3列を作ります。複数の行で同じ列を共有できるため、カード一覧や画面全体の区画をそろえるのに向きます。

.target {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

inline-gridは行に参加するGridの箱

外側の箱は inline-grid、内部の行と列はGridです。小さなキー配列や複数の数値を文章中にまとめて配置したい場合などに使えます。

.target {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

noneとcontents：何が消えるのかを比較する

noneは対象と子の表示領域をなくす

対象も子も表示されず、その分のレイアウト領域もなくなります。通常はアクセシビリティツリーからも除外されます。DOMの要素そのものを削除するわけではなく、JavaScriptから再表示できます。フォーカス中の要素を隠す場合は、フォーカスの戻し先も設計します。

visibility: hidden は一般に場所を残し、opacity: 0 は透明でも操作やフォーカスの対象になる場合があります。目的が異なるので、見た目だけで置き換えないでください。

.target { display: none; }

contentsは対象自身の箱だけをなくす

通常の要素では、対象自身の背景・境界線・余白の箱がなくなり、子が周囲のレイアウトへ参加します。DOMの親子関係は変わりません。CSSセレクターの関係やイベントの伝播も、DOMから要素を削除した場合とは異なります。

一部の要素やアクセシビリティ実装では注意が必要です。意味を持つ要素やフォーム部品へ安易に使わず、対象ブラウザーと支援技術で役割・名前が保たれるかを確認してください。

.target { display: contents; }

flow-root：浮動要素を含む領域を独立させる

floatした子を親の高さへ含める

flow-root は新しいブロック整形コンテキストを作ります。float した子を含む領域や、親子間のマージン相殺を区切りたい場合に有用です。子を自動で横並びにする値ではありません。通常の箱だけなら block と見た目が同じこともあります。

.article-card { display: flow-root; }
.thumbnail {
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 12px;
}

比較サンプルの「floatを含む親の比較」では、同じ浮動要素と短い本文を持つ block と flow-root を並べています。親の背景と高さがどう変わるかを確認してください。

list-item・table系の表示

list-itemはマーカーも作る

list-item は項目の本体に加えてマーカーボックスを作ります。list-style-type や list-style-position で表現を調整します。CSSで見た目だけをリストにしてもHTMLの意味は置き換わらないため、通常のリストは ul・ol・li を使います。

tableとinline-tableは外側の並び方が違う

table は外側がブロック相当の表、inline-table は行に参加する表です。表の内部では、次の値がそれぞれの役割を持ちます。

• table-row：横方向の1行。
• table-cell：セル。複数の行で列幅の計算に参加する。
• table-row-group：本文の行グループ。通常は tbody。
• table-header-group：見出しの行グループ。通常は thead。
• table-footer-group：末尾の行グループ。通常は tfoot。
• table-column・table-column-group：列と列グループ。通常は col・colgroup。一般の箱のように文章を入れて表示するものではない。
• table-caption：表の説明。通常は caption。

.data-table { display: table; }
.data-table .row { display: table-row; }
.data-table .cell {
  display: table-cell;
  padding: 8px;
  border: 1px solid #45614e;
}

これは表示方式の説明用です。データの表にはHTMLの table・tr・th・td を使い、見出しとデータの関係を伝えます。比較サンプルには caption・colgroup・thead・tbody・tfoot を持つ実際の表も掲載しています。

2つのキーワードと初期値

外側と内側を明示できる

• display: block flex は display: flex と同じ外側・内側の組み合わせ。
• display: inline flex は display: inline-flex に対応。
• display: block grid は display: grid に対応。
• display: inline grid は display: inline-grid に対応。
• display: inline flow-root は display: inline-block に対応。

従来の単一キーワードと複数キーワードの構文は、対応開始版が異なる場合があります。以下の互換性資料で、使う構文まで確認してください。

初期値と継承、その他の値

• 初期値：inline。
• 通常の継承：しない。

div が最初からブロックとして見えるのは、ブラウザーの既定スタイルがあるためです。仕様上の初期値と、特定のHTML要素の既定表示は区別します。inherit・initial・unset・revert・revert-layer は継承やカスケードを制御する共通値で、新しい配置方式ではありません。

このページのサンプルは日常的なレイアウト値を対象とします。ルビ用の ruby・ruby-base・ruby-text・ruby-base-container・ruby-text-container は専用の整形文脈に関係します。ルビにはまずHTMLの ruby・rt を使用してください。ルビの内部値や math など特殊な文脈の値は、実装差があるためMDNと対象ブラウザーで個別に確認します。

同じHTMLで見た目を比較する

HTMLの対象と子を区別する

以下を index.html の body に入れ、head から styles.css を読み込みます。値を切り替える対象は .target だけです。

<div class="stage">
  <span>前</span>
  <span class="target">
    <span class="item">A</span>
    <span class="item">B</span>
    <span class="item">C</span>
  </span>
  <span>後</span>
</div>

styles.cssを変更する

* { box-sizing: border-box; }
.stage { padding: 24px; border: 1px dashed #45614e; }
.target {
  display: inline-block; /* 比較したい値へ変更する */
  width: 240px;
  height: 116px;
  padding: 12px;
  margin: 8px;
  border: 2px solid #45614e;
  background: #d2f777;
  vertical-align: middle;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.item {
  display: inline-block;
  width: 44px;
  padding: 6px;
  border: 1px solid #45614e;
  background: white;
}

gap や grid-template-columns が書いてあっても、対応するレイアウト方式でなければ期待した配置にはなりません。公開サンプルでは値ごとの説明と、実際の箱の寸法も表示します。

displayが効かないときの確認

親のレイアウトと子の指定を調べる

flex や grid は、配置したい要素の親へ指定します。対象が既にFlex・Gridのアイテムなら、外側の表示型が通常フローと異なる扱いになる場合もあります。開発者ツールで親と子の両方の計算済みスタイルを確認します。

見た目とHTMLの意味を分ける

見た目の順序を変えてもDOMの読み順やキーボード操作順は同じとは限りません。none や contents を使う場合は、画面だけでなくフォーカスやアクセシビリティも確認してください。

displayのブラウザー互換性

プロパティ本体の対応

2026年9月21日確認のMDN Browser Compatibility Dataの記録です。開始版は通常の接頭辞なしの実装を優先しています。プロパティが使えることと、すべての値・構文が使えることは別です。

• Chrome：1以降
• Edge：12以降
• Firefox：1以降
• Safari：1以降
• Android版Chrome：18以降
• iOS版Safari：1以降

「部分対応」「補足条件あり」の場合は下の出典の注記も確認します。開発版・予定版の記録は、その機能が現在の安定版で使えるという意味ではありません。

値・利用場面による追加の対応差

• block：Chrome 1以降 ／ Edge 12以降 ／ Firefox 1以降 ／ Safari 1以降。
• flex：Chrome 29以降 ／ Edge 12以降 ／ Firefox 20以降・補足条件あり ／ Safari 9以降。
• grid：Chrome 57以降 ／ Edge 16以降 ／ Firefox 52以降 ／ Safari 10.1以降。

これらは互換性データ上の機能名です。対応する値・文脈の詳細や、ここに挙げていない新しい機能はMDNの個別ページを参照してください。

関連する記事と参考資料

関連する記事

• visibility の使い方
• position の使い方
• top の使い方
• right の使い方
• bottom の使い方
• CSSプロパティ一覧
• CSSセレクターと条件指定
• HTML・CSSの学習順

参考資料

• MDN：display
• CSS仕様の定義
• 互換性データの出典
• 初期値・継承情報の出典

互換性はMDN Browser Compatibility Data 8.1.2、初期値と継承はmdn-data 2.36.0（いずれもCC0-1.0）を参照しています。ブラウザー更新時には対象の値まで含めて再確認してください。