実行できるCSSドキュメント: CSS display

Q: block、inline、inline-block の違いは何ですか？

block の要素は新しい行から始まり、使える幅いっぱいに広がります。inline の要素は文章の中に流し込まれ、width、height、上下の margin を無視します。inline-block は inline のように文章の中に流れますが、block のように幅、高さ、padding、margin が効きます。

Q: display: none と visibility: hidden の違いは何ですか？

display: none は要素とその場所を取り除きます。visibility: hidden は要素を見えなくしますが、レイアウト上の場所は残るので、ほかの要素は動きません。

Q: div は初期状態で block ですか、inline ですか？

block です。div、p、見出し、ul、section、form は初期状態で block です。span、a、strong、em、img、input、button は inline か inline-block です。

Q: inline-block の要素の間にすき間ができるのはなぜですか？

HTML のタグとタグの間の空白が、単語の間と同じように 1 つのスペースとして表示されるからです。代わりに親に display: flex と gap を使うか、空白を取り除きます。

display の役割

すべての要素には、レイアウトのされ方を決める display の値があります。最初に出会うのは block、inline、inline-block の 3 つです。次の 3 つのボックスは width、height、padding、margin がすべて同じで、display だけが違います:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>block, inline, inline-block</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.6; }
    .demo { border: 1px dashed #9ca3af; padding: 8px; margin-bottom: 12px; }
    .box {
      width: 120px; height: 40px;
      padding: 6px; margin: 10px;
      background: #bfdbfe; border: 2px solid #2563eb;
    }
    .block { display: block; }
    .inline { display: inline; }
    .inline-block { display: inline-block; }
  </style>
</head>
<body>
  <div class="demo">Text before <span class="box block" id="b">block</span> text after.</div>
  <div class="demo">Text before <span class="box inline" id="i">inline</span> text after.</div>
  <div class="demo">Text before <span class="box inline-block" id="ib">inline-block</span> text after.</div>
</body>
</html>

	`block`	`inline`	`inline-block`
新しい行から始まる	はい	いいえ	いいえ
初期状態の幅	コンテナいっぱい	内容に合わせる	内容に合わせる
`width` と `height`	効く	無視される	効く
上下の margin	効く	無視される	効く
上下の padding	内容を押し広げる	描かれるが、行の間隔は広がらない	内容を押し広げる
代表的な要素	`div`、`p`、`h1`、`ul`、`section`	`span`、`a`、`strong`、`em`	`button`、`input`、`img` (置換要素はこの動きをします)

プレビューでは、block のボックスは幅 120px で 1 行を占めます。inline のボックスは幅と高さを無視して単語だけを囲み、上下の padding と border は行の上下にはみ出しますが、行の高さは変わりません。inline-block のボックスは文章の行の中にとどまりつつ、指定したサイズを保ちます。

display: block

block の要素は使える幅をすべて使い、後に続くものを新しい行に押し出します。リンクを block にすると、行全体をクリックできるようになります:

.menu a {
  display: block;       /* the full row is the link */
  padding: 10px 16px;
}

block は幅を指定でき、幅があれば margin: 0 auto で中央に寄せられます。詳しくは div の中央寄せのページを見てください。

display: inline-block

inline-block は中間の値です。単語のように行の中に流れますが、サイズを指定できます。文章の中のバッジ、ボタン、アイコンに便利です:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>inline-block badges</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .badge {
      display: inline-block;
      min-width: 24px;
      padding: 2px 8px;
      margin-inline-start: 4px;
      border-radius: 999px;
      background: #dc2626; color: white;
      font-size: 12px; font-weight: 700; text-align: center;
    }
  </style>
</head>
<body>
  <p>Inbox <span class="badge">3</span></p>
  <p>Notifications <span class="badge">12</span></p>
</body>
</html>

inline-block のボックスを横に並べると、HTML の空白のせいで間に小さなすき間ができます。ボックスを横に並べるなら、親に display: flex を使うほうが適しています。

display: none と visibility: hidden の違い

どちらも要素を見えなくします。違いは場所を残すかどうかです:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>none vs hidden</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; margin-bottom: 12px; }
    .row div { width: 70px; padding: 12px 0; text-align: center; background: #bbf7d0; border: 2px solid #16a34a; }
    .none { display: none; }
    .hidden { visibility: hidden; }
  </style>
</head>
<body>
  <div class="row"><div>1</div><div>2</div><div>3</div></div>
  <div class="row"><div>1</div><div class="none">2</div><div>3</div></div>
  <div class="row"><div>1</div><div class="hidden">2</div><div>3</div></div>
  <button type="button" id="toggle">Toggle box 2 in the first row</button>
  <script>
    document.getElementById('toggle').addEventListener('click', () => {
      document.querySelector('.row div:nth-child(2)').classList.toggle('none');
    });
  </script>
</body>
</html>

	`display: none`	`visibility: hidden`	`opacity: 0`
場所を取る	いいえ	はい	はい
クリックできる	いいえ	いいえ	はい
スクリーンリーダーが読む	いいえ	いいえ	はい
なめらかにアニメーションできる	いいえ	いいえ	はい

HTML の hidden 属性は、ブラウザのスタイルシートを通じて display: none と同じ働きをします。そのため、要素に display を指定する CSS のルール (たとえば .card { display: flex; }) があるとそれが優先され、要素がまた表示されます。これで困ったら [hidden] { display: none !important; } を追加しましょう。

見た目だけ隠してスクリーンリーダーには残したいとき (アイコンボタンのラベルなど) は、display: none ではなく「visually hidden」のクラスを使います。

display: flex と display: grid

この 2 つは、要素を子要素のためのレイアウトコンテナにします:

display: flex は子要素を 1 行または 1 列に並べ、配置と間隔を調整できます。flexbox を参照してください。
display: grid は子要素を行と列に同時に配置します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex and grid</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .item { padding: 10px; background: #fde68a; border: 2px solid #f59e0b; text-align: center; }
    .flex { display: flex; gap: 8px; margin-bottom: 16px; }
    .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  </style>
</head>
<body>
  <div class="flex"><div class="item">flex 1</div><div class="item">flex 2</div><div class="item">flex 3</div></div>
  <div class="grid">
    <div class="item">grid 1</div><div class="item">grid 2</div><div class="item">grid 3</div>
    <div class="item">grid 4</div><div class="item">grid 5</div>
  </div>
</body>
</html>

コンテナ自身は block のままです。inline-flex と inline-grid は子要素に対しては同じ働きをしますが、コンテナ自身を inline-block のように行の中に流します。

そのほかの値

値	役割
`flow-root`	float を内側に収め、子要素の margin が外にはみ出さない block。現代の「clearfix」
`contents`	要素自身のボックスが消え、子要素が親の子要素として振る舞う。ボタン、リスト、テーブルには使わないこと: 一部のブラウザでは、スクリーンリーダー向けの要素の意味が失われます
`list-item`	リストマーカー付きの block。`li` の初期値
`table`、`table-row`、`table-cell`	テーブル以外の要素でテーブルのレイアウトを使う
`inline-flex`、`inline-grid`	行の中に置かれる flex または grid のコンテナ

よくある間違い

span や a に width や height を指定する。 inline 要素では無視されます。inline-block か block にしましょう。
inline 要素に上下の margin を付ける。 これも無視されます。直し方は同じです。
スクリーンリーダー向けのテキストを display: none で隠す。 スクリーンリーダーからも隠れてしまいます。
display: none の親の中で子要素が表示されると思う。 隠れた親の中は何も描画されません。
display のルールが hidden 属性を上書きする。 CSS のルールが優先されます。
display をアニメーションさせようとする。 display: none にすると、フェードせずにすぐ消えます。opacity をアニメーションさせ、最後に display (または visibility) を切り替えましょう。

よくある質問

block、inline、inline-block の違いは何ですか？

block の要素は新しい行から始まり、使える幅いっぱいに広がります。inline の要素は文章の中に流し込まれ、width、height、上下の margin を無視します。inline-block は inline のように文章の中に流れますが、block のように幅、高さ、padding、margin が効きます。

display: none は何をしますか？

要素をページから完全に取り除きます。場所を取らず、描画されず、スクリーンリーダーからも隠れます。子要素も一緒に隠れ、子要素に display を指定しても表示できません。

display: none と visibility: hidden の違いは何ですか？

display: none は要素とその場所を取り除きます。visibility: hidden は要素を見えなくしますが、レイアウト上の場所は残るので、ほかの要素は動きません。

div は初期状態で block ですか、inline ですか？

block です。div、p、見出し、ul、section、form は初期状態で block です。span、a、strong、em、img、input、button は inline か inline-block です。