CSS displayの種類一覧｜block・inline・noneの違い

CSS の display とは、要素を「どんな箱として並べるか」と「中身（子要素）をどう並べるか」を決めるプロパティで、block は横幅いっぱいに広がって縦に積まれ、inline は文章の一部として横に並び、none は箱そのものを作りません。 inline-block・flex・grid などの値も、この「外側の並び方」と「内側の並べ方」の組み合わせとして整理できます。

この記事では、display の値の一覧表、block・inline・inline-block で幅・高さ・上下の margin / padding・改行がどう効くかの比較、主な HTML 要素の既定値、inline-block の隙間の原因と対処、display: none と visibility: hidden・opacity: 0・hidden 属性の違い、none からのアニメーション、display: contents の注意点までを扱います。比較表の数値はすべて Chromium 141（Playwright 1.56 のヘッドレス実行）で getBoundingClientRect() や getComputedStyle() を使って実測したものです。「効く・効かない」を言葉だけでなく px の数値で確かめられます。

CSS displayの早見表

よく使う値は block・inline・inline-block・flex・grid・none の6つです。 まずはこの表で全体をつかんでください。

displayが決める2つのこと（外側と内側）

display の値は、次の2つを同時に決めています（MDN の display のページで確認）。

• 外側の表示型（outer display type）：その要素自身が、親の中でどう並ぶか。block か inline。
• 内側の表示型（inner display type）：その要素の子が、どのルールで並ぶか。flow（通常の流れ）、flow-root、flex、grid、table など。

flowchart LR
  D[display の値] --> O[外側: 自分の並び方]
  D --> I[内側: 子の並べ方]
  O --> O1[block: 前後で改行]
  O --> O2[inline: 文中に並ぶ]
  I --> I1[flow: 通常の流れ]
  I --> I2[flow-root: 独立した箱]
  I --> I3[flex / grid / table]

現在の仕様では display: inline flex のように 2語で「外側 内側」を並べて書くこともでき、これまでの1語の書き方はその短縮形にあたります。Chromium 141 で CSS.supports() と算出値（getComputedStyle の結果）を確かめた結果は次のとおりです。

inline-block の正体は「外側は inline、内側は flow-root」だと分かります。つまり「文中に並ぶが、中身は独立した箱」です。なお、MDN に載っている run-in と grid-lanes は、Chromium 141 では CSS.supports が false でした。

普段の CSS は1語の書き方で十分です。2語の書き方は「flex は外から見ると block と同じ」と理解するための見取り図として役立ちます。

block・inline・inline-blockの違い（実測比較）

比較に使ったコード

同じスタイル（width: 200px; height: 100px; margin: 20px; padding: 10px）を付けた span の display だけを切り替え、前後に文字を置いて寸法と位置を測りました。親の幅は 600px、文字は 16px、行の高さは 24px です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
  body  { margin: 0; font: 16px/24px monospace; }
  #wrap { width: 600px; background: #eee; }
  #t {
    display: inline-block;   /* ここを block / inline / inline-block に切り替える */
    width: 200px;
    height: 100px;
    margin: 20px;
    padding: 10px;
    background: #9cf;
  }
</style>
</head>
<body>
  <div id="wrap"><span id="a">前</span><span id="t">対象</span><span id="b">後</span></div>
  <script>
    const r = document.getElementById('t').getBoundingClientRect();
    const w = document.getElementById('wrap').getBoundingClientRect();
    console.log(`対象: ${r.width} x ${r.height} / 親の高さ: ${w.height}`);
  </script>
</body>
</html>

ブラウザで開いてコンソールを見ると、inline-block のとき 対象: 220 x 120 / 親の高さ: 160 と表示されます。

実測結果

数値から読み取れることを整理します。

• block は幅を指定しなければ親の幅いっぱい（600px）に広がり、前後で改行します。 「前」「対象」「後」が3段に積まれたため、親の高さは 208px になりました。
• inline は width・height と上下の margin が効きません。 上下の padding は背景色としては描かれます（箱の高さ 39px = 文字 19px + 上下 padding 20px）が、親の高さは 24px のままで、対象の上端は親より 8px 上にはみ出していました。上下の行と重なって見える原因はこれです。
• inline-block は横に並んだまま、block と同じ 220 × 120 の箱になります。 上下の margin も親の高さに反映されました（160px）。

「横に並べたい、でも幅・高さ・上下の余白も効かせたい」ときが inline-block の出番です。複数の要素を横に並べてレイアウトする用途には、後述の隙間の問題がない flex が向いています。

text-align と vertical-align の効き方

中央寄せの方法全体は、当サイトの「CSS 中央寄せの方法」の記事で 15 パターンを実測しています。

主な要素の既定値一覧

HTML の要素には、ブラウザがあらかじめ display の値を割り当てています。Chromium 141 で各要素を作り、getComputedStyle(要素).display を読んだ結果です。

img は inline ですが、width・height が効きます。 画像や動画、input のように中身が外部のコンテンツやフォーム部品である要素は「置換要素」と呼ばれ、inline でも寸法を指定できる特別な扱いになっています。

また、img の下にできる数 px の隙間は、inline として文字のベースライン（文字の下端の基準線）に揃えられるために生じます。高さ 40px の画像だけを入れた div の高さを測ると次のとおりでした。

画像の下の隙間をなくしたいときは、display: block か vertical-align: bottom（または middle）を指定します。

inline-blockの隙間の原因と対処

inline-block を横に並べると、要素の間に数 px の隙間ができます。原因は、HTML のタグとタグの間の改行や空白が「半角スペース1つ」として表示されるためです。inline-block は文字と同じ扱いで並ぶので、単語の間の空白と同じものが入ります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
  body { margin: 0; font: 16px/24px monospace; }
  .row { width: 600px; }
  .item { display: inline-block; width: 100px; height: 40px; background: #9cf; }
</style>
</head>
<body>
  <div class="row">
    <span class="item"></span>
    <span class="item"></span>
  </div>
</body>
</html>

2つの .item の間隔（右の箱の左端 − 左の箱の右端）を、条件を変えて測りました。

隙間の大きさはフォントと文字サイズで変わります（この測定は等幅フォントです）。間隔を自分で決めたい場合は、親を display: flex にして gap で指定する方法が、HTML の書き方に左右されず分かりやすい選択です。

/* 直す前：隙間がフォント任せになる */
.item { display: inline-block; }

/* 直した後：親で並べ、間隔は gap で決める */
.row  { display: flex; gap: 8px; }

inline-block が向いているのは、文中に置くバッジやボタンのように「文字と一緒に流れてほしい」部品です。その場合、単語の間の空白と同じ隙間はむしろ自然な間隔として働きます。

display:noneとvisibility:hidden・opacity:0・hidden属性の違い

要素を見えなくする方法は複数あり、「場所を取るか」「読み上げられるか」「クリックできるか」が異なります。 「上」「保存する（ボタン）」「下」を縦に並べ、ボタンを各方法で隠して測りました。

<div id="w" style="width:300px">
  <p style="margin:0">上</p>
  <button id="t" style="display:none">保存する</button>  <!-- ここを切り替える -->
  <p style="margin:0">下</p>
</div>
<button id="after">次</button>

「アクセシビリティのスナップショット」は Playwright の aria_snapshot() の結果で、スクリーンリーダー（画面読み上げソフト）に伝わる要素の目安になります。実際の読み上げソフトでの確認は行っていません。

hidden属性は display の指定で上書きされる

hidden 属性は、ブラウザの既定のスタイルで display: none になる仕組みです。そのため、自分の CSS で display を指定すると表示されます。 Chromium 141 での算出値です。

<style>.box { display: flex; }</style>
<div class="box" hidden>x</div>

getComputedStyle(要素).display → "flex"（hidden を付けているのに表示される）

hidden を使う要素にクラスで display を当てる場合は、次の1行を足しておくと意図どおりに隠れます。

[hidden] { display: none !important; }

なお、hidden="until-found" を付けた要素は、Chromium 141 では display: block・content-visibility: hidden になっていました。ページ内検索で見つかったときに開く、という用途向けの値です。

見た目だけ隠して読み上げには残す

反対に「画面には出さないが、読み上げには伝えたい」テキスト（アイコンだけのボタンの説明など）には、display: none も visibility: hidden も使えません。次のような「視覚的に隠す」クラスが広く使われています（一般に知られた書き方で、この記事では読み上げの確認は未実行です）。

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

display:noneからアニメーションさせる方法

display は「数値の途中」がない値（離散値）なので、これまでは display: none と display: block の切り替えに transition を組み合わせても、フェードが動きませんでした。現在は transition-behavior: allow-discrete と @starting-style の2つで、CSS だけで開閉のフェードを書けます。

対応状況

MDN では、transition-behavior と @starting-style はどちらも 「Baseline 2024（Newly available）」で、2024年8月以降の主要ブラウザの最新版で動くと案内されています（一部の機能は対応に差があるとの注記つき）。Chromium 141 では CSS.supports('transition-behavior', 'allow-discrete') が true でした。

コピペ用の完成形

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
  .panel {
    display: none;
    opacity: 0;
    /* display の切り替えも transition の対象にする */
    transition: opacity 0.5s linear, display 0.5s linear allow-discrete;
  }
  .panel.open {
    display: block;
    opacity: 1;
  }
  /* none から表示されるときの「出発点」 */
  @starting-style {
    .panel.open { opacity: 0; }
  }
</style>
</head>
<body>
  <button type="button" onclick="document.getElementById('p').classList.toggle('open')">開閉</button>
  <div id="p" class="panel">パネルの内容</div>
</body>
</html>

transition の一括指定の中の allow-discrete は、transition-behavior: allow-discrete を display に対して指定したのと同じ意味です。

4パターンの実測

クラス open を付けた直後（開く）と外した直後（閉じる）から、経過時間ごとの display と opacity の算出値を記録しました（0.5 秒、linear）。

開くとき（open を付ける）

閉じるとき（open を外す）

閉じるときは、allow-discrete を付けると display が 0.5 秒間 block のまま保たれ、最後に none に切り替わります。 MDN にも「表示から none へのアニメーションでは、値は 100% の時点で none に切り替わる」と説明されており、実測と一致しました。開閉の両方を滑らかにするには、3) のように2つをセットで書きます。

transition と @keyframes の使い分けなど、アニメーション全般は当サイトの「CSS アニメーション」の記事で扱っています。

display:contentsの使いどころと注意

display: contents は、その要素自身の箱を作らず、子要素を「親の直接の子」であるかのように並べる値です。Flexbox や Grid の中にラッパー要素が挟まっていて、孫要素を親のレイアウトに参加させたいときに使えます。

<div style="display:flex; gap:10px; width:600px">
  <div style="width:100px">A</div>
  <div id="wrap" style="display:contents; background:red; padding:20px; border:5px solid; margin:30px">
    <div style="width:100px">B</div>
    <div style="width:100px">C</div>
  </div>
</div>

使うときに知っておきたい点は次の3つです。

Grid の入れ子で列を揃えたい場合は subgrid という選択肢もあります。Flexbox と Grid の選び方は、当サイトの「FlexboxとGridの使い分け」の記事で、同じ UI を両方で作って比較しています。

flow-root・list-item・table系の使いどころ

flow-root：中身を閉じ込める箱

display: flow-root は、外から見ると block と同じで、内側に「独立した整形の範囲（ブロック整形コンテキスト）」を作る値です。次の2つの場面で役立ちます。

以前は overflow: hidden や clearfix と呼ばれる書き方で同じ効果を得ていましたが、flow-root は「はみ出しを切り取る」などの副作用がありません。

list-item：行頭記号を出す

li の既定値です。li に display: block や display: flex を指定すると、行頭記号（・や数字）が出なくなります。記号を残したまま中身を横に並べたいときは、li の中に div を1つ入れて、その div を flex にします。

table系：表の並べ方を借りる

display: table / table-row / table-cell は、table・tr・td の既定値です。反対に、table 要素に display: block や flex を指定すると、表としての意味が読み上げに伝わりにくくなると MDN に注意書きがあります。スマートフォン向けに表を縦積みにする場合は、この点を踏まえて確認します。表のレスポンシブ対応は、当サイトの「HTMLテーブルのCSSデザイン」の記事で扱っています。

目的別・displayの選び方

つまずきやすい点のチェック表

よくある質問

Q. block と inline-block はどう使い分けますか？ A. 前後で改行して1行を占めてほしいなら block、ほかの要素や文字と同じ行に並べたいなら inline-block です。どちらも幅・高さ・上下の margin / padding が効きます（実測ではどちらも 220 × 120 の箱になりました）。違いは「改行が入るか」と「幅を指定しないときに親いっぱいに広がるか（block）、中身の分だけになるか（inline-block）」の2点です。

Q. display: none にした要素は、検索エンジンや読み上げにどう扱われますか？ A. display: none の要素は箱が作られず、MDN でも「アクセシビリティツリーから取り除かれ、読み上げられない」と説明されています。実測でも Playwright のスナップショットに出ませんでした。HTML のソースには残るため、ブラウザの開発者ツールなどでは確認できます。検索エンジンでの扱いはこの記事では検証していません。伝えたい内容は表示した状態で書くのが分かりやすい方針です。

Q. flex と inline-flex の違いは何ですか？ A. 中の並べ方（フレックス）は同じで、その要素自身が外でどう並ぶかが違います。flex は block と同じく前後で改行して幅いっぱいに広がり、inline-flex は inline-block と同じく文中に並んで中身の分の幅になります。2語の書き方では block flex と inline flex です。grid と inline-grid も同じ関係です。

Q. display の切り替えを JavaScript で行うときのコツはありますか？ A. el.style.display = 'block' と直接書くと、もともと flex や grid だった要素のレイアウトが変わってしまいます。クラスの付け外し（classList.toggle('open')）か、hidden 属性の切り替え（el.hidden = true）にすると、表示時の display を CSS 側で一元管理できます。

まとめ

• display は「外側（自分の並び方）」と「内側（子の並べ方）」を決める。 inline-block は「外は inline、内は独立した箱」、flex は「外は block、内はフレックス」。
• inline には width・height・上下の margin が効かない。 実測では同じ指定で block と inline-block が 220 × 120、inline は 52 × 39 だった。
• inline-block の隙間は、タグの間の改行が空白として表示されたもの（16px の文字で 9.64px）。親を flex にして gap で間隔を決めると解消できる。
• display: none は場所も取らず、visibility: hidden は場所を残し、opacity: 0 は見えないだけでクリックもフォーカスもできる。
• hidden 属性は自分の CSS の display 指定で上書きされる。 [hidden] { display: none !important; } を足すと安定する。
• none からのフェードは allow-discrete（閉じる側）と @starting-style（開く側）をセットで書く。
• display: contents は箱だけを消して子を残す。 ボタンなど操作できる要素に使うと、Tab キーのフォーカスが当たらなくなる。

株式会社RJCでは、CSSのdisplayをはじめとするレイアウトの基礎を仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。