初心者向けCSS完全ガイド！displayプロパティとは？仕組みと全種類をキャラクターで解説

Webデザイン（CSS）を勉強していると、必ず何度も見かける display（ディスプレイ） という文字。

「いろいろ種類があって、何を指示しているのかさっぱり分からない…」
「コードを書いたのに、サイズや余白が思い通りに動かない！」

そんな悩みを抱えていませんか？実は、CSSのレイアウトでつまずく原因のほとんどは、HTMLの「タグ」が元々持っているブロック・インラインという性質と、それを切り替える display の仕組みをセットで理解できていないことにあります。

ここでは、すべてのレイアウトの土台となる「ボックスモデル」の基本から、displayで指定できるすべての値の種類とサンプルコードまで、初心者向けに詳しく解説します！

【最優先】displayを理解するための基本「ボックスモデル」とは？

display プロパティを正しく扱うために、まずはWebページの見た目を形作る最重要ルール「ボックスモデル」を必ず押さえてください。

HTMLのタグは、ブラウザに表示されるとき、「長方形の箱（ボックス）」として扱われるものと、そうでないもの（箱を作らず、文字そのものとして扱われるもの）に分かれます。

この「箱」として扱われるタグは、内側から順に以下の4つのエリアで構成されています。

1. コンテンツエリア：文字や画像が実際に表示される領域。
2. パディング（Padding）：コンテンツのまわりにある「内側の余白」エリア。
3. ボーダー（Border）：タグのまわりを囲む「枠線」エリア。
4. マージン（Margin）：他のタグとの間隔を作る「外側の余白」エリア。

display プロパティは、「この4つのエリアからなる『箱』を新しく作るのか、それとも箱を作らないのか」を設定するスイッチであり、「作った箱を画面上でどのように並べるか」を切り替える司令塔なのです。

displayとは？なぜそんなに重要な命令なのか（初心者がハマる罠）

CSSの display は、ざっくり言うと「そのタグに、どんな『キャラクター（表示形式）』を与えて画面に登場させるか」を指示する命令です。この命令によって、先ほど説明した「箱（ボックスモデル）」が、画面上でどのように並ぶか、あるいはどんな性質を持つかが決まります。

すべてのHTMLタグは、それぞれ生まれ持った初期設定のキャラクター（「ブロック」と「インライン」）を持っています。

HTMLタグが持つ2つの初期設定

• ブロックの性質を持つタグ（<div> や <p>、<h1> など）：
  初期状態から「しっかりとした四角い箱」として扱われます。1行を丸ごと占領して、上から下へ縦に積み重なるキャラクターです。
• インラインの性質を持つタグ（<a> や <span>、<strong> など）：
  文章（テキスト）の一部として扱われます。四角い箱としての独立した形を持たず、左から右へ文字として流れるだけのキャラクターです。

このように、タグによって最初から「箱の形をしているか、ただの文字か」という前提が異なります。

この初期設定のキャラクターを、後から自由に変更・上書きして変身させられる命令が display です。

初心者がハマる具体例（上下の文章にボタンが重なるバグ）

たとえば、文章の途中に「背景がオレンジ色で、中に白い文字が入った、横に長くて押しやすいボタン」を作ろうとして、以下のようにHTMLを書いたとします。
検証しやすいように、ボタンの上下に通常の文章を配置しています。

HTML

CSS

ブラウザでの表示

ここで、「ボタンのサイズを、文字と外枠（ボーダー）との間隔を空けて大きくしたい」と思い、.custom-btn に対してCSSで内側の余白（padding: 100px 100px;）を指定したとします。

CSS

HTML

実は、これだとブラウザの仕様上、非常に奇妙でひどいレイアウト崩れが起きてしまいます。

インライン要素に padding を指定すると、画面上では以下のように動くからです。

⚠️ インラインのタグにpaddingを指定したときの実際の動き

• 横方向（左右の72px余白）：文字が増えると横に広がっていくのと同じように、左右にある要素をきれいに押し退けて正常に広がります。
• 縦方向（上下の18px余白）：ここが最大の罠です。文字と外枠（ボーダー）との間隔は広がり、オレンジ色の背景も上下に大きくなります。しかし、インラインの
• キャラクターには「上下にある周りの文章を押し退ける力が一切ありません」。
• その結果：上下に広がったボタンのオレンジ色の背景が、上にある文章と下にある文章の領域を完全に無視し、文字の上にボコッと重なって乗っかってしまう（はみ出す）という現象が起きます。（※数値を padding: 100px; などに大きくすると、さらに大量の文字を覆い隠すように重なってしまいます）

文字と同じように横に広がることはできても、縦（上下）に周りを押し退けて自分のためのスペースを作ることができない。これがインラインの性質を持つタグの絶対的なルール（制限）であり、限界なのです。

⚠️ 上の文章はオレンジ色背景に隠れて消えるのに、なぜ下の文章はオレンジ色背景の上に文字が上書きされて見えるの？

これはブラウザのバグではなく、CSSの「要素が重なり合うときの優先順位（描画の順番）」という明確なルールによって起きている現象です。

原因：HTMLは「後から書いたもの」が上に重なるから
Webブラウザは、HTMLコードを「上から下に向かって順番に」読み込み、画面に描画していきます。
このとき、後に描画された要素ほど、画面の手前（上層）に重ねられるという大原則があります。

HTMLの記述は、

1. <p>これはボタンの上の文章です。～</p> （最初に描画：一番下層）
2. <a class=”custom-btn”>ボタン</a> （次に描画：上層）
3. <p>これはボタンの下の文章です。～</p> （最後に描画：一番上層）

の順番で処理されるため、重なり方に以下のような違いが生まれます。

① 上の文章が「消える（下に隠れる）」理由
「ボタン（2番目）」は「上の文章（1番目）」よりも後に描画されるため、上の文章よりも手前（上）に配置されます。
そのため、ボタンに指定した不透明なオレンジ色の背景が、上の文章を上から覆い隠してしまい、文字が消えたように見えます。

② 下の文章が「上書きされる（上に飛び出す）」理由
「下の文章（3番目）」は「ボタン（2番目）」よりもさらに後に描画されるため、ボタンよりもさらに手前（上）に配置されます。
そのため、下の文章の文字が、オレンジ色の背景を突き抜けて一番手前に表示され、上書きされたように見えます。

💡 さらに一歩進んだ疑問：上と下で文字の重なり方が違うのはなぜ？

実際にコードを動かしてみると、「上の文章はオレンジ色に隠れて消えるのに、下の文章はオレンジ色の上に文字が乗っかっている」という奇妙な見え方になります。

これは、ブラウザがHTMLを「上から順番に組み立てているから」です。CSSの世界では、後から書いたタグほど、画面の手前（上層）に重ねられていくという大原則があります。

• 上の文章：ボタンより先に組み立てられるため、ボタンの「後ろ」に隠れて文字が見えなくなります。
• 下の文章：ボタンよりも後に組み立てられるため、ボタンの「手前」に重ねられます。

今回は下の文章に背景色を指定していない（透明な）ため、文字だけがオレンジ色の上に飛び出して見えていますが、もし下の文章に別の背景色（例えばグレーなど）が不透明に指定されていたら、オレンジ色のボタンを覆い隠すようにグレーの箱が手前にドンと現れ、その上に文字が表示されることになります。

後から書いたものがどんどん手前に重なっていく性質が生んだ、インライン要素ならではの面白いバグの形ですね。

displayで「ブロック（箱）」のキャラクターに変身させて解決する

奇妙な重なりバグを解決し、上下の余白（100px）でも周りの文章をきれいに上下へ押し退けて、思った通りのレイアウトにするためには、display 命令を使います。

.custom-btn-2（<a>タグ）のキャラクターを「サイズや上下余白が正しく周囲に干渉するブロック（四角い箱）」へ強制的に変更するのです。

HTML

CSS

ブラウザでの表示

display: block; を1行足すだけで、ボタンは「1行を丸ごと独占する箱」に生まれ変わるため、上の文章と下の文章の間にパキッと独立して配置され、上下の余白も美しく機能するようになりました。

このように、「タグの余白やサイズ、横並びなどのデザインを変更したいのに、思った通りに動かない！」という時に、その前提となるキャラクター（表示形式）を切り替えるために使うのが display です。

一方、display: block; に変えたことで、今度は「ボタンが画面の横幅いっぱいにまでドーンと広がってしまった」という新しい現象が起きました。これには、block（ブロック要素）というキャラクターが持つ「もう1つの絶対的なルール」が関係しています。

ボタンが画面の横幅いっぱいに広がった原因：ブロック要素は「横幅の初期値が100%」だから

display: block;（ブロック要素）にしたタグには、ブラウザの仕様上、

・横幅（width）を個別に指定していない場合、自動的に「親要素（画面）の横幅いっぱいに広がる（width: 100% になる）」

というルールが強制的に適用されます。

元々の <a> タグ（インライン要素）は、「文字の長さに合わせて、必要最小限の横幅に縮む」という性質でした。そのため、左右に padding: 100px; を足しても、「文字の幅 ＋ 左右の100pxずつ」のコンパクトな横幅で収まっていました。

しかし、display: block; に変身させたことで、「俺は1行を丸ごと独占する箱だ！」という性質に変わってしまいました。

その結果、「画面の横幅いっぱいに広がった巨大な箱」になり、さらにその中身に対して「左右100pxの余白（padding）」が内側につくという状態になったため、画面幅いっぱいのオレンジ色の帯のようなボタンになってしまったのです。

解決策：横幅（width）をセットで指定してあげる

「ボタンの横幅を 100px」に戻すには、ブロックに変身させると同時に、「この箱の横幅は〇〇pxだよ」とCSSで明示的にサイズを指定する必要があります。

CSS

HTML

ブラウザでの表示

display: block; を指定して「1行を丸ごと独占する箱」に変身させ、同時に width（横幅）の指定とセットで使う ことにより、ボタンは上の文章と下の文章の間にパキッと独立して配置され、上下の余白も画面幅いっぱいに暴走することなく美しく機能するようになります。

💡 疑問：padding（余白）の数値だけで調整すれば、width（横幅）は不要では？

読者の中には、「padding の左右の数値を大きくすればボタン全体の幅も勝手に広がるのだから、わざわざ width を書かなくても、余白の数値だけで理想のボタン幅に調整できるのでは？」と思う方もいると思います。

しかし、実務のWeb制作ではある強力な制限がかかるため、余白だけに頼ることはできず、どうしても width が必要になります。

原因1：中身の文字数（テキストの長さ）という制限があるから
ボタンの横幅を padding だけでコントロールしようとした場合、ボタン全体の横幅を決定づけるのは「中の文字数」になってしまいます。
たとえば、サイト内に「ログイン」と「新規会員登録」という2つのボタンを並べたいとします。
これらに同じ padding を指定すると、文字数の違いがそのままボタンの幅に影響し、2つのボタンの横幅がチグハグ（バラバラ）になってしまうのです。
サイト全体のデザインをきれいに美しく整えるためには、文字数に関係なく外側からサイズを制限してあげる必要があります。

原因2：width は「箱の骨組み（主役）」であり、padding は「肉付け（脇役）」だから
CSSの仕組み（ボックスモデル）において、width と padding の間には「主役と脇役」のような絶対的な上下関係（優先順位）があります。

• width（横幅）：箱そのものの「骨組み（全体のサイズ）」を決定する命令
• padding（余白）：その骨組みの「内側」に、どれくらい隙間を空けるかという命令

ブラウザがデザインを計算するときは、まず主役である width（骨組み）を最優先でガチッと確定させます。
その後から、脇役である padding が「確定したサイズの内側」に入り込む形で処理されるため、width の方が圧倒的に強い力（優先権）を持っているのです。

だからこそ「width」で制限をコントロールする

この「文字数による制限」を乗り越え、どんな時でも狙った通りのきれいなボタンにするには、width を使ってボタンの横幅を外側から固定（制限）する必要があります。

width: 200px; のようにサイズを指示すれば、中の文字が4文字でも6文字でも、ボタン全体の横幅は絶対に「200px」に綺麗に揃います。

さらに、この width のコントロールは、現代のWeb制作に欠かせない「スマホ対応（レスポンシブ）」でも絶大な威力を発揮します。
もしパソコン用に width: 400px; のような大きなボタンを作った場合、そのままでは画面幅の狭いスマホ（画面幅320pxなど）で見たときにボタンが右端を大きく突き抜けてしまいます。

そこで、width とセットで max-width: 100%;（最大でも画面幅の100%までに制限する）という命令を1行足します。
CSS

ここで新しく登場した box-sizing: border-box; という命令は、スマホ対応を成功させるための必須の設定です。

「【最優先】displayを理解するための基本「ボックスモデル」とは？」で説明した通り、CSSの初期設定のままだと、コンテンツエリア（文字が入る領域）の横幅に、余白（padding）が「外側にどんどん肉付け」されて足し算されてしまいます。
その結果、せっかく画面幅ぴったりにボタンを制限しても、余白の厚みのせいでボタン全体が画面の右端を突き抜けてしまいます。

そこで、この box-sizing: border-box; を指定します。
この命令は、ブラウザに対して「余白の厚みを、外側に足すのではなく、指定した横幅の内側にすべて含めて計算しなさい！」とルールを変更する役割を持っています。

これを1行書いておくだけで、どんなに余白を広げてもボタン全体の横幅が画面幅を超えなくなるため、スマホの狭い画面の中にきれいに収めることができるのです。

プロのWeb制作では、この「余白を足すと箱が巨大化するバグ」を防ぐために、CSSのいちばん最初ですべてのタグに対してこの設定を一括適用するのが鉄則となっています。

👉 【必読】余白の計算バグを1秒で解決する！box-sizingの仕組みとプロの共通設定はこちら

display の値の種類一覧（全31種類ロードマップ）

display に指定できるすべての値の種類を網羅して紹介します。

現代のCSSでは、馴染みのある短い書き方（ショートハンド）だけでなく、外側と内側の性質を明示する「フル表記」や、一括でリセットできる「グローバル値」が定義されています。

これらの命令は、すべて以下の「2つの役割（外側と内側）」のどちらか、あるいは両方をコンピューターに指示する仕組みになっています。

• 【外側の性質】：そのタグ「自分自身」をどんな形にして、周りのタグとどう並べるか（1行を占領して次を下に落とすか、隙間に滑り込んで横に並ぶか）。
• 【内側の性質】：そのタグの「中身（子要素）」を、どういうルールで並べるか（普通に上から下へ並べるか、特殊な整列モードにするか）。

すべての値はこの2つの組み合わせで定義されているため、この仕組みを理解しておくことで、それぞれの値が持つ「自分自身の並び方」と「中身の並べ方」のルールをロジカルに整理できるようになります。

① よく使う一言の命令（Short display：14種類）

② 外と内を詳しく指定する命令（Full display：12種類）

CSS Display Module Level 3 では、displayプロパティの書き方が進化し、値を「1つの単語」で表す方法と「2つの単語」で表す方法の2種類が定義されました。
display: [外側の性質] [内側の性質]; のように2つの単語をスペースで区切って並べることで、外側と内側のキャラクターを同時に指示できます。
動きは上記の「一言の命令」と同じです。

👉 [2つの単語で書く「フル表記」のメリットとブラウザ対応の解説記事はこちら]

③ 設定をリセット・引き継ぐ共通命令（Global values：5種類）

どのCSSプロパティにも使える、設定を元に戻したり親のタグから引き継いだりするための「共通のリセット命令」です。

新しく「縦に並べる」「横に並べる」といったデザインの指示を出すものではなく、「間違えてあててしまったCSSをまっさらに戻す」「親のタグの設定をそのままコピーする」といった、設定を巻き戻すためのボタンのような役割を持っています。

👉 [CSSの共通リセット命令（グローバル値）の一括マスター記事はこちら]