Webページを作っていると、「divは縦に並ぶのに、spanは横に並ぶ」「aにwidthを書いても幅が変わらない」といった違いに出会います。この並び方やサイズ指定の効き方に関係するのが、CSSのdisplayプロパティです。
displayの違いは、まず「前後で改行するか」「幅や高さを指定できるか」の2点で比べると整理できます。block・inline・inline-blockを使い分けると、文章の装飾からボタン風リンクまで、目的に合う形を選べます。
この記事では、同じHTMLのdisplayだけを変えて3つの違いを確かめ、余白の注意点と表示が変わらないときの確認順まで解説します。CSSの宣言の形がまだ曖昧な場合は、先にCSSの基本的な書き方を確認すると読み進めやすくなります。
displayが決めることと、HTMLタグの初期表示との関係block・inline・inline-blockの改行とサイズの違いwidth・height・margin・paddingが効く範囲- リンクをボタン風にする実例と、3つの値の選び方
- 指定が反映されないときの確認順
CSSのdisplayとは
displayは、要素がどのような箱を作り、周囲の要素とどう並ぶかを設定するCSSプロパティです。基本構文は次のとおりです。
セレクター {
display: 値;
}たとえば、.itemというclassが付いた要素をブロックとして表示するなら、次のように書きます。
.item {
display: block;
}まずは、要素自身の並び方と箱の大きさに注目しましょう。以下は横書き・通常の配置での比較です。親にFlexboxやGridを指定した場合や、float、position: absolute;などを使う場合は、並び方の条件が変わります。
図は通常の配置での並び方を示す概念図です。inlineとinline-blockは、行の空きに収まる場合を示しています。
同じHTMLで3つを比べる
パソコンのテキストエディターとブラウザーを用意します。公開中のサイトを編集せず、練習用のファイルで試しましょう。2つのspanと幅・高さは固定し、displayの値だけを変えて比べます。
テキストエディターで新しいファイルを作り、次のコードをすべて貼り付けます。文字コードをUTF-8、ファイル名をdisplay-test.htmlにして保存してください。末尾が.html.txtになっていないことも確認します。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>displayの比較</title>
<style>
.sample {
display: inline;
width: 200px;
height: 80px;
background-color: #f5f6f2;
}
</style>
</head>
<body>
<span class="sample">サンプル1</span>
<span class="sample">サンプル2</span>
</body>
</html>保存したファイルをブラウザーで開きます。最初のinlineでは、背景が文字の範囲に沿い、幅200px・高さ80pxの箱にならなければ想定どおりです。
エディターに戻り、display: inline;をdisplay: block;へ変えて保存し、ブラウザーを再読み込みします。幅200px・高さ80pxの箱が縦に並ぶことを確認してください。次にdisplay: inline-block;へ変え、同じように保存・再読み込みします。2箱と間の空白が収まる広さなら、同じ大きさの箱が横に並びます。
最後にブラウザーの横幅を狭め、inline-blockも空きが足りないと折り返すことを確認します。練習を最初からやり直すときはdisplay: inline;へ戻し、保存・再読み込みしてください。
「inlineは文字に沿う」「blockは大きさを指定でき、行を分ける」「inline-blockは大きさを指定でき、空きがあれば同じ行に並ぶ」の3つを見分けられれば、この練習は完了です。表示が変わらないときは、後半の「displayが反映されないときの確認順」へ進みましょう。
HTMLには、ブラウザーの初期スタイルによってdivやpはblock、spanやaはinlineとして表示される、といった傾向があります。ただし、これは変更できない分類ではありません。HTMLタグ名だけで表示方法を決めつけず、必要に応じてCSSのdisplayを確認します。
HTMLタグは文章の意味に合うものを選び、並び方はCSSで調整します。「見た目が横並びだからspan」ではなく、「短い文中の範囲だからspan」と考えると、HTMLの意味とデザインを分けて判断できます。
displayの全体像は、MDNのdisplayプロパティの解説でも確認できます。
display: blockの特徴
display: block;を指定した要素は、通常の配置では新しい行から始まる箱を作ります。ここからは、各値の用途や余白を個別の例で確認します。以下の短いコードを試すときは、練習ファイルのbody内をHTMLの例に、style内をCSSの例に置き換えてください。例ごとに置き換えると、前の指定が残ることを防げます。
blockの並び方
ブロックボックスは新しい行から始まり、次の要素もその後の新しい行に配置されます。幅を狭く指定しても、それだけで横並びにはなりません。たとえば、次の3つのdivは縦に並びます。
<div class="box">1つ目</div>
<div class="box">2つ目</div>
<div class="box">3つ目</div>.box {
display: block;
background-color: #eef1ea;
border: 1px solid #7a8e6d;
}blockは要素の前後で改行されるため、基本的に1行に1つずつ縦へ並びます。見出し、段落、セクションのように、内容をまとまりとして区切りたい場面に向いています。
blockのサイズと余白
blockでは、widthとheightが反映されます。padding、border、marginも箱の配置へ影響します。
.box {
display: block;
width: 240px;
height: 80px;
margin: 16px 0;
padding: 16px;
}widthを省略したblock要素は、多くの場合、左右のmarginなどを除いた親要素の利用可能な幅まで広がります。width: 100%;が自動設定されるわけではありません。
箱の幅にpaddingとborderがどう加わるかは、CSSのボックスモデルで詳しく解説しています。
display: inlineの特徴
display: inline;を指定した要素は、文章の一部のようにインラインボックスを作ります。span、a、strongなどは、ブラウザーの初期スタイルでinlineになる代表例です。
inlineの並び方
インラインボックスは、自分の前後に改行を作りません。行に空きがあれば、前後の文字や別のインライン要素と同じ行に並びます。
<p>
CSSの<span class="term">display</span>を学びます。
</p>.term {
display: inline;
color: #536048;
background-color: #f2d89c;
}この例のspanは「CSSの」と「を学びます。」の間に入り、文章の流れを保ちます。単語の色を変える、文章中の一部へ背景色を付ける、テキストリンクを置く、といった用途に向いています。
inlineのサイズと余白
spanやaなど、内容が文字で決まる通常のインライン要素では、widthとheightを指定してもその大きさにはなりません。箱の大きさは主に内容で決まります。imgは例外で、後ほど説明します。
.term {
display: inline;
width: 200px;
height: 80px;
}このwidthとheightを書いても、通常のspanは200px×80pxにはなりません。spanやaの幅・高さが変わらないときは、最初に計算後のdisplayがinlineではないか確認します。
通常のinline要素では、左右のmargin・padding・borderは横方向の配置に反映されます。一方、上下のmarginは行間を広げません。上下のpadding・borderは見た目には広がりますが、前後の行を十分に押し広げないため、重なって見えることがあります。
なお、imgのように外部の画像へ置き換えて表示する要素は「置換要素」と呼ばれ、初期表示がインラインでも幅と高さを持てます。「inlineならすべて幅・高さが無効」ではなく、ここでは通常のspanやaなどの非置換要素を説明している点に注意してください。
文章の一部を装飾するだけならinlineのままで十分です。幅・高さや上下の余白まで箱として整えたいかを、inline-blockへ変える判断基準にします。
display: inline-blockの特徴
display: inline-block;は、周囲に対してはインラインのように並び、箱自身はブロックのようにサイズや余白を扱える表示方法です。
inline-blockの並び方とサイズ
inline-blockは、自分の前後に改行を作りません。ただし、行の空きに収まらないときは、箱全体が次の行へ折り返します。width、height、上下左右のpadding、border、marginを箱として扱えます。
.label {
display: inline-block;
width: 120px;
padding: 8px 12px;
margin: 4px;
border: 1px solid #7a8e6d;
}inline-blockは、同じ行に置きながら幅・高さ・上下の余白を整えたいときに使います。ラベル、バッジ、小さなメニュー項目、ボタン風リンクなどに向いています。必ず1行に収まる指定ではありません。
リンクをボタン風に整える
ボタン風リンクでは、inline-blockにすると、上下の余白も含む箱が行の高さに反映されます。ここではサイズ比較とは別に、余白でボタンの形を整える例を示します。/service/は例のリンク先なので、実際のページのURLに置き換えてください。
<a class="more-link" href="/service/">サービスを見る</a>.more-link {
display: inline-block;
padding: 12px 20px;
color: #ffffff;
background-color: #536048;
border-radius: 8px;
text-decoration: none;
}この指定では、リンクを同じ行に置ける性質を保ちながら、上下左右に余白を持たせられます。違いはクリック領域を作れるかだけでなく、上下の余白を行の配置へ反映できることです。inlineのリンクにもpaddingは付きますが、上下へ広がった部分が前後の行と重なる場合があります。
ただし、リンク先への移動ならa、フォームの送信や画面内の操作ならbuttonのように、HTML要素は役割に合わせて選びます。見た目をボタン風にするためだけに要素の意味を変えないでください。
block・inline・inline-blockの違いを比較
3つの違いを、まず周囲との並び方と用途で整理します。
| 値 | 改行・サイズの特徴 | 向いている用途 |
|---|---|---|
block | 前後で改行。幅・高さを指定できる | 大きなまとまり、見出し、段落 |
inline | 前後に改行を作らない。通常の要素では幅・高さが効かない | 文中の文字、リンク、強調 |
inline-block | 同じ行に置ける。幅・高さを指定でき、空きが足りなければ折り返す | ボタン、ラベル、横並びの小箱 |
プロパティごとの基本的な効き方は、次の表で確認できます。ここでのinlineは、通常のspanやaなどの非置換要素を指します。なお、隣り合うblockの上下marginは重なり合う「相殺」が起こる場合があり、常に足し算になるわけではありません。
| プロパティ | inline | block・inline-block |
|---|---|---|
width・height | 原則として指定どおりにならない | 指定できる |
左右のmargin | 効く | 効く |
上下のmargin | 行レイアウトには効かない | 効く |
padding・border | 見た目は付くが上下が重なる場合あり | 箱として周囲を押し広げる |
選び方は、次の3段階で考えると整理できます。
- 要素の前後で改行し、横幅を使うまとまりにしたいなら
block - 文章の一部として流し、内容に沿う装飾だけなら
inline - 同じ行に置きながら、幅・高さ・上下余白を整えたいなら
inline-block
迷ったときは、まず「前後で改行するか」と「箱のサイズを指定するか」の2点を決めます。改行するならblock、改行せずサイズ不要ならinline、改行せずサイズが必要ならinline-blockです。
HTML要素の初期表示をdisplayで変更する方法
HTML要素にはブラウザーの初期スタイルがありますが、CSSで表示方法を変更できます。
spanをblockに変更する
spanを1行ずつ並べたい場合は、次のようにblockを指定できます。
<span class="step">手順1</span>
<span class="step">手順2</span>.step {
display: block;
margin-bottom: 8px;
}2つのspanは縦に並びます。CSSでdisplayを変えても、HTML要素が持つ文章上の意味や役割までは変わりません。spanは汎用的な文中要素のままです。
divをinlineに変更する
divにもinlineを指定できます。
.short-item {
display: inline;
}ただし、見た目だけを理由にHTML構造を不自然にする必要はありません。まとまりを表すdivを大量にインライン化するより、文中の短い範囲なら最初からspanが適切なこともあります。
初期値とブラウザーの初期スタイルを区別する
displayの初期値はinlineです。ただし、ブラウザーはdivやpへ最初からdisplay: block;を指定する初期CSSを持っています。この初期CSSをユーザーエージェントスタイルシートと呼びます。
displayは、親要素から子要素へ自動的に引き継がれません。親にdisplay: block;を書いても、子要素のdisplayは変わりません。
displayでよくある間違い
widthを書いたのにspanの幅が変わらない
原因として多いのは、spanがinlineのままになっていることです。
.tag {
width: 160px;
background-color: #eef1ea;
}このままでは、通常のspanにwidthが反映されません。横並びを維持したいなら、次の1行を追加します。
.tag {
display: inline-block;
width: 160px;
}縦に並べたいならblockを選びます。単に「幅を効かせるため」と覚えるのではなく、同時に改行が必要かも判断してください。
inlineの上下paddingが隣の行と重なる
インラインボックスに上下のpaddingやborderを付けると、見た目の箱は上下へ広がります。ただし、その広がりが行の配置を十分に押し広げるとは限りません。
.word {
display: inline;
padding: 16px 8px;
border: 2px solid #c28a3d;
}行間が狭い文章では、枠が前後の行へ重なる場合があります。文章中の控えめな装飾なら上下の値を小さくし、箱として大きな上下余白が必要ならinline-blockを検討します。
inline-block同士に小さな隙間ができる
HTMLでinline-block要素の間に改行や半角スペースがあると、その空白が文字間のスペースとして表示されることがあります。
<span class="label">HTML</span>
<span class="label">CSS</span>inline-block同士の数pxの隙間は、CSSのmarginではなくHTML内の空白が原因の場合があります。正確な間隔を管理するレイアウトでは、親要素にFlexboxを使いgapで指定する方法が扱いやすくなります。具体的な設定は、Flexboxの基本と子要素の並べ方で確認できます。
display: noneを見た目だけの非表示に使う
display: none;を指定すると、その要素は箱を作らず、レイアウトから取り除かれます。さらに、通常はスクリーンリーダーが参照するアクセシビリティツリーからも取り除かれます。
.hidden {
display: none;
}読み上げには残したまま画面だけで隠したい内容へ、display: noneを使うのは適切ではありません。非表示の目的が「全員に不要」「画面だけで隠す」「場所だけ残す」のどれかを確認し、目的に合う方法を選びます。MDNのdisplay: noneとアクセシビリティの注意も確認してください。
displayが反映されないときの確認順
まず、編集したファイルを保存し、表示しているページを再読み込みします。練習ファイルなら、開いているdisplay-test.htmlが保存先のファイルと同じかも確認してください。それでも想定どおりにならない場合は、次の順で原因を絞ります。
- 対象：class名やセレクターが目的の要素と一致しているか
- 書き方：
display: inline-block;のコロン、値、セミコロンが正しいか - 上書き：別のCSSルールに後から上書きされていないか
- 計算後の値：デベロッパーツールの「計算済み」で最終的な
displayを確認したか - 関連する条件：親のFlexboxやGrid、
position、floatなど別のレイアウト条件がないか
計算後の値とは、初期CSSや上書きなどを反映したあとの値です。対象の要素を右クリックして「検証」を開き、「Elements（要素）」で対象を選び、「Computed（計算済み）」でdisplayを探します。表示名はブラウザーや言語設定によって異なります。
たとえば、次の値はdisplayの有効な値ではありません。
.item {
display: inlineblock;
}正しくは、ハイフンを入れたinline-blockです。無効な宣言はブラウザーに採用されないため、それより前の指定、ブラウザーの初期スタイル、またはCSSの初期値による表示が残ります。
計算後の値が意図と違えば、対象・書き方・上書きと、親などのレイアウト条件を見直します。値がinline-blockなのに折り返すなら、要素の幅、余白、要素間の空白を含めて、その行に収まるか確認しましょう。
デベロッパーツールで試した変更は、再読み込みで消える場合があります。意図した並び方になったら元のHTML・CSSファイルへ反映し、保存後に再読み込みしても同じ表示になることを確認して修正を終えます。
widthが効かないときに最初から数値を変え続けるのではなく、「どの要素に、最終的にどのdisplayが適用されているか」から確認します。箱の種類が原因なら、幅の数値を変えても解決しません。
より詳しい定義は、W3CのCSS Display Module Level 3で確認できます。仕様書は英語の一次資料なので、最初はMDNの日本語解説で動きをつかみ、必要な範囲を仕様書で確かめると読み進めやすいでしょう。
よくある質問
- a要素をblockやinline-blockにしてもよいですか？
-
はい。リンク先へ移動する役割が正しければ、
aへblockやinline-blockを指定できます。カード全体をリンクにするならblock、文章と同じ行に置くボタン風リンクならinline-blockが候補です。 - display: noneとvisibility: hiddenの違いは何ですか？
-
display: none;は要素の場所がなくなり、通常は読み上げ対象からも外れます。visibility: hidden;は場所を残したまま見えなくなり、通常は読み上げ対象からも外れます。画面だけ隠して読み上げを残す目的には、どちらも向きません。 - flexやgridはblock・inlineとどう違いますか？
-
block・inlineは要素自身が周囲とどう並ぶかを表し、flex・gridは主に子要素をどう並べるかを決めます。display: flex;とdisplay: grid;は、外側では通常blockとして扱われます。同じ行へ置く場合はinline-flexやinline-gridがあります。
まとめ
CSSのdisplayを使うと、要素が周囲とどう並び、サイズや余白をどう扱うかを変更できます。
blockは前後で改行され、幅・高さを指定できるinlineは文章の一部として並び、通常の要素では幅・高さが効かないinline-blockは同じ行に置けて、幅・高さ・上下の余白を箱として扱える。空きが足りなければ折り返す- HTMLタグの意味とCSSの表示方法は分けて考える
- 反映されないときは、計算後の
displayから確認する
まずは「同じHTMLで3つを比べる」の例で、displayだけを1つずつ変えてみてください。値を変えたら保存・再読み込みを行い、「改行」と「200×80pxの箱になるか」の順で確認しましょう。
目的別に次の記事を選ぶ
次に確かめたいことに合わせて、以下の記事へ進んでください。
幅に余白や枠線がどう加わるかを確認したい場合は、ボックスモデルの記事が役立ちます。
複数の要素を並べ、間隔や配置をまとめて整えたい場合は、Flexboxへ進みましょう。
