CSS displayの使い方｜block・inline・flex・grid・noneの違いを初心者向けに解説

HTML要素を縦に並べる、横に並べる、格子状に配置する、画面から消す。このような表示方法を切り替えるCSSがdisplayプロパティです。

display: blockやdisplay: inlineだけでなく、現在のWeb制作ではFlexboxを使うflexとGridを使うgridもよく使います。どの要素へ指定するかによって結果が変わるため、最初は混乱しやすいですよね。

この記事では、block、inline、inline-block、flex、grid、noneの違いを、同じHTMLと表示結果で比較します。後半では、値の選び方や効かないときの確認項目も解説します。

CSSのdisplayとは

displayは、要素がどのようなボックスとして扱われ、内側の子要素をどのレイアウト方法で並べるかを指定するCSSプロパティです。「メソッド」やHTML属性ではありません。

.card-list {
  display: flex;
}

この例では.card-listがFlexboxのコンテナーになり、直下の子要素がflexアイテムとして並びます。displayを指定した要素自身と、その子要素の両方へ影響がある点が重要です。

外側の表示形式と内側のレイアウト

現在のCSS仕様では、displayを「要素自身が周囲とどう並ぶか」という外側の表示形式と、「子要素をどう並べるか」という内側の表示形式に分けて考えます。

display: flexは、仕様上は外側がblock、内側がflexの組み合わせです。複数キーワード構文ではdisplay: block flexとも書けますが、初心者は広く使われているdisplay: flexから覚えて問題ありません。

displayの主な値を一覧で比較

最初に、よく使う6種類の違いを図で見てみましょう。青・紫・黄色の同じ3要素へ異なるdisplayを適用しています。

block、inline、inline-blockは通常フロー内でのボックスの振る舞いを変えます。flexとgridは、指定した要素の直下にある子要素へ新しいレイアウト方式を作ります。

display: blockの使い方

display: blockを指定した要素は、通常フローで新しい行から始まり、利用できる横方向の幅を占めます。width、height、上下左右のmarginやpaddingを指定できます。

div、p、見出しなどは、ブラウザの初期スタイルでblockとして表示される代表例です。ただし、HTMLタグの意味と見た目は別なので、タグは文書構造に合うものを選びましょう。

<span class="label">HTML</span>
<span class="label">CSS</span>
<span class="label">JavaScript</span>

.label {
  display: block;
  width: 12rem;
  margin-block: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: #dbeafe;
}

変更前のspanは文章と同じ行に並びます。変更後は一つずつ新しい行から始まり、幅12remの箱として縦に並びます。

display: inlineの使い方

display: inlineの要素は、文章の一部として同じ行に並びます。行に収まらなければ、テキストと同じように次の行へ折り返します。

span、a、strongなどは、通常inlineとして表示されます。一般的な非置換inline要素ではwidthとheightを指定してもボックスの大きさは変わらず、上下marginも行の配置を押し広げません。

<p>
  CSSでは<span class="keyword">display</span>を使って
  要素の表示形式を変えます。
</p>

.keyword {
  display: inline;
  color: #1d4ed8;
  background-color: #dbeafe;
  padding-inline: 0.25rem;
}

displayという語だけに色と背景が付き、前後の文章と同じ行に収まります。文章の一部を強調したいだけなら、無理に幅や高さを付ける必要はありません。

display: inline-blockの使い方

inline-blockは、周囲とはinlineのように同じ行へ並びながら、要素自身にはblockのように幅・高さ・上下左右の余白を指定できます。行内に置くボタン風リンクやタグに便利です。

<a class="button" href="lesson.html">レッスンを始める</a>
<a class="button button--secondary" href="guide.html">使い方を見る</a>

.button {
  display: inline-block;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  color: #ffffff;
  background-color: #2563eb;
  text-decoration: none;
}

.button--secondary {
  background-color: #475569;
}

変更後は文字以外のpadding部分もリンクのクリック範囲になります。リンク先へ移動する操作にはa、フォーム送信や画面内の処理にはbuttonを使い、見た目だけでHTMLタグを選ばないようにしましょう。

display: flexの使い方

display: flexを親要素へ指定すると、直下の子要素がflexアイテムになります。Flexboxは、横一列または縦一列という一方向の配置や整列に向くレイアウト方法です。

<div class="card-list">
  <article class="card">HTML</article>
  <article class="card">CSS</article>
  <article class="card">JavaScript</article>
</div>

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 12rem;
  padding: 1rem;
  border: 1px solid #cbd5e1;
}

変更前はarticleが縦に並びます。変更後は横方向へ並び、画面が狭くなって収まらないときはflex-wrap: wrapによって次の行へ折り返します。

Flexboxには主軸・交差軸、整列、伸縮などの考え方があります。詳しい使い方は次の記事で確認してください。

inline-flexとの違い

inline-flexも、内側の子要素はFlexboxで並べます。違いはコンテナー自身が周囲に対してinlineとして並ぶことです。

.icon-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

アイコンと短い文字を一つの行内部品としてまとめる場面などに使えます。複数キーワード構文のdisplay: inline flexも同じ組み合わせを表します。

display: gridの使い方

display: gridを親要素へ指定すると、直下の子要素がgridアイテムになります。Gridは列と行を同時に扱う二次元レイアウトに向いています。

<div class="gallery">
  <article class="gallery__item">作品A</article>
  <article class="gallery__item">作品B</article>
  <article class="gallery__item">作品C</article>
  <article class="gallery__item">作品D</article>
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1rem;
}

.gallery__item {
  min-height: 10rem;
  padding: 1rem;
  background-color: #eff6ff;
}

変更後は、14rem程度を基準に画面へ入る列数が自動で変わります。狭い画面ではmin(100%, 14rem)によって1列が画面幅を超えないようにしています。

FlexboxとGridの選び方

• 横または縦の一方向で並べ、内容に合わせて伸縮させたい場合はFlexbox
• 列と行を揃え、二次元の配置を設計したい場合はGrid
• ページ全体でどちらか一方に統一せず、部品ごとに適した方法を使う

CSSレイアウトには通常フロー、Flexbox、Grid、positionなど複数の方法があります。ページ構造から整理したい方は、次の記事も参考にしてください。

display: noneの使い方

display: noneを指定すると、その要素はボックスを生成せず、子孫も含めて表示されなくなります。元の場所も残らないため、後ろの要素が詰めて配置されます。

<p class="desktop-note">パソコン向けの補足です。</p>

@media (max-width: 48rem) {
  .desktop-note {
    display: none;
  }
}

この例では画面幅48rem以下で補足を非表示にします。display: noneの内容は通常、支援技術からも利用できなくなるため、重要な説明や操作手段を特定の利用者だけから隠さないように注意してください。

表示・非表示の違い、JavaScriptでの切り替え、visibilityやopacityとの違いは次の記事で詳しく解説しています。

覚えておくと便利なdisplayの値

基本の6種類以外にも、目的が明確な値があります。最初から暗記せず、必要になったときに役割を確認しましょう。

flow-rootでfloatを包含する

.article-section {
  display: flow-root;
}

.article-section img {
  float: left;
  margin: 0 1rem 1rem 0;
}

flow-rootによって新しいブロック整形コンテキストが作られ、親要素が内部のfloatを包含しやすくなります。現在の新規レイアウトはFlexboxやGridで作ることが多いものの、既存コードのfloatを扱うときに役立ちます。

contentsはアクセシビリティを確認して使う

display: contentsはラッパー自身の主要ボックスを生成せず、子要素をレイアウトへ参加させます。ただし、要素の意味や支援技術での扱いに影響するブラウザ実装上の問題が報告されてきたため、実際の対応環境でアクセシビリティツリーまで確認して使ってください。

displayの値を選ぶ手順

1. HTMLを意味の通る文書構造で書く
2. 通常フローの表示を確認する
3. 行内か、縦積みか、一方向か、行と列かを決める
4. displayを必要な親または対象要素へ指定する
5. 狭い画面、キーボード操作、支援技術で確認する

文章の一部ならinline

文章中の強調、リンク、短い注釈など、テキストの流れへ入るものはinlineが基本です。幅と高さを持つ行内部品にしたい場合はinline-blockを検討します。

縦に積む箱ならblock

見出し、段落、セクション、カードなど、通常フローで一つずつ縦に積む箱はblockの振る舞いが適しています。HTMLの初期表示ですでにblockなら、同じ指定を追加する必要はありません。

一方向はflex、二次元はgrid

ナビゲーション、ボタン列、アイコンと文字の整列などはFlexboxが得意です。カード一覧や写真一覧のように列と行の両方を揃える場合はGridを検討します。

displayが効かないときの確認項目

• HTMLのclass名とCSSセレクターが一致しているか
• displayのスペル、コロン、セミコロンが正しいか
• より詳細度の高いCSSや後ろのルールに上書きされていないか
• display: flexやgridを子要素ではなく並べたい要素の親へ指定しているか
• FlexboxやGridの影響を受けるのが原則として直下の子要素であると理解しているか
• メディアクエリの条件で別のdisplayへ切り替わっていないか
• 親要素にdisplay: noneが付いていないか

ブラウザの開発者ツールで要素を選び、StylesとComputedのdisplayを確認すると、最終的に使われている値が分かります。打ち消し線があれば別のルールに上書きされています。

子要素へflexを書いても兄弟は横並びにならない

横に並べたい3つのカードそれぞれへdisplay: flexを書いても、カード同士の並び方は変わりません。カードの親へ指定してください。

/* 誤り：カードの内側だけがFlexboxになる */
.card {
  display: flex;
}

/* 正しい：直下のカードがflexアイテムになる */
.card-list {
  display: flex;
  gap: 1rem;
}

「何を並べたいか」を決め、その要素の一つ上にある親を探すのがコツです。カード内部のアイコンと文字も並べたい場合は、カード自身にも別途Flexboxを設定できます。

displayについてよくある質問

displayはHTMLに書きますか？

displayはCSSプロパティなので、基本はCSSファイルへ書きます。HTMLのclassで対象を識別し、CSSのセレクターから指定すると管理しやすくなります。

displayの初期値は何ですか？

CSSプロパティとしての初期値はinlineですが、ブラウザのユーザーエージェントスタイルシートによって、多くのHTML要素にはblockやlist-itemなどの表示が設定されています。実際の値は開発者ツールのComputedで確認してください。

block要素とinline要素はHTMLタグの固定分類ですか？

初期表示の違いを学ぶために「ブロック要素」「インライン要素」と説明されることはありますが、実際のボックスの振る舞いはCSSのdisplayで変更できます。一方、HTMLタグの意味や入れ子のルールまでdisplayで変わるわけではありません。

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

display: noneはボックスを生成せず、場所も残しません。visibility: hiddenは見えなくなりますが、通常はレイアウト上の場所を残します。

displayの使い方まとめ

displayは、要素自身が周囲とどう並ぶか、子要素をどのレイアウト方法で並べるかを決めるCSSプロパティです。文章の一部はinline、幅を持つ行内部品はinline-block、縦に積む箱はblockを基本に考えます。

子要素を一方向に並べるならflex、列と行で配置するならgridが便利です。表示から除外するときはnoneを使いますが、重要な情報や操作を支援技術からも隠さないよう注意してください。

目的別にほかのCSSプロパティも探したい場合は、次のコード一覧を活用できます。

仕様を詳しく確認するときは、MDNのdisplay、通常フローでのブロック・インラインレイアウト、フレックスボックスも参考になります。