要素を横に並べたいのに改行されてしまう、width を指定したのに効かない——こうした「並び方」のつまずきは、CSS の display プロパティを理解すると解決します。display は、要素が画面上でどう箱（ボックス）として扱われるかを決める、レイアウトの土台になるプロパティです。この記事では、もっとも基本となる block・inline・inline-block・none の4つを取り上げ、それぞれの違いと使い分けを、実際の表示を見比べながら初心者の方にも分かるように解説します。
目次
display とは何か
display は、その要素をどんな種類のボックスとして配置するかを指定するプロパティです。HTML の各要素には、もともと既定の display 値が決まっています。たとえば div や p は block、span や a は inline です。CSS で display を上書きすれば、この振る舞いを変えられます。
まずは4つの値が見た目にどう違うのかを、下のプレビューで確かめてみましょう。同じような要素でも、display の値によって並び方やサイズの効き方が変わります。CSS を書き換えると右側にすぐ反映されます。
<p>テキストの中の<span class="inline">インライン</span>と<span class="inline">インライン</span>は、改行されず横に続きます。</p>
<div class="block">block その1</div>
<div class="block">block その2</div>
<span class="ib">inline-block</span>
<span class="ib">横に並ぶ</span>
<span class="hidden">none で消える</span>
.inline {
background: #ffe08a;
/* インラインは width / height / 上下marginが効かない */
width: 300px; /* 無視される */
padding: 2px 6px;
}
.block {
background: #b3d4ff;
width: 200px; /* 効く */
margin-bottom: 8px;
padding: 8px;
}
.ib {
display: inline-block;
background: #c8f7c5;
width: 130px; /* 効く */
height: 40px; /* 効く */
padding: 8px;
margin-right: 4px;
}
.hidden {
display: none; /* 要素ごと消える（場所も取らない） */
}
4つの値の特徴を表にまとめると、次のようになります。違いは「縦に積まれるか／横に並ぶか」と「幅・高さを指定できるか」の2点を押さえると整理しやすくなります。
| 値 | 並び方 | width / height |
|---|---|---|
block | 縦に積まれる（前後で改行される） | 指定できる |
inline | 横に続く（改行されない） | 指定できない |
inline-block | 横に並ぶ | 指定できる |
none | 表示されない（場所も取らない） | — |
block：縦に積まれるボックス
display: block の要素は、横幅いっぱいに広がり、前後で改行されて縦に積み重なっていきます。width や height、上下左右すべての margin・padding が指定でき、レイアウトの箱として自由に大きさを決められます。div・p・h1〜h6・section などが、もともと block の要素です。
.card {
display: block; /* div などは指定しなくても block */
width: 300px; /* 幅を指定できる */
padding: 16px;
margin-bottom: 16px; /* 上下の余白も効く */
}横幅を指定しないときは、親要素の幅いっぱいに広がるのが block の特徴です。リンク（a）など本来は横並びの要素でも、display: block を指定すればボタンのように縦積みのブロックとして扱えます。
inline：文章の中に流れる要素
display: inline の要素は、テキストと同じように横に流れて並び、改行されません。span・a・strong・em などがこれにあたります。文章の一部だけ色を変えたり強調したりするのに向いています。
注意したいのは、インライン要素には width と height が効かない点です。大きさは中身の文字量で決まります。また margin と padding は左右には効きますが、上下方向の margin はレイアウトに反映されません（行の高さは line-height で決まります）。先ほどのプレビューで、.inline に width: 300px を指定しても無視されていたのはこのためです。
.highlight {
display: inline; /* span などは指定しなくても inline */
background: #fff3a0;
padding: 0 4px; /* 左右の padding は効く */
/* width や height、上下の margin は効かない */
}inline-block：横に並ぶのにサイズも効く
display: inline-block は、inline と block の「いいとこ取り」をした値です。要素どうしは横に並びながら、width・height や上下の margin・padding も指定できます。横並びのボタンやナビゲーション項目、カードを並べたいときに便利です。
.btn {
display: inline-block; /* 横に並ぶ */
width: 120px; /* 幅を指定できる */
padding: 10px 0;
text-align: center;
}なお、要素を横に並べるレイアウトは、現在は display: flex（Flexbox）や display: grid（Grid）を使うのが主流です。これらも display の値の一つで、子要素の並べ方をまとめて制御できます。inline-block は、ボタンやタグなど「単体の要素にサイズを持たせつつ文章の流れに乗せたい」場面で今も役立ちます。
none：要素を消す
display: none を指定すると、その要素はまったく表示されず、レイアウト上の場所も取らなくなります。あたかも HTML から削除されたかのように、後ろの要素が詰めて配置されます。メニューの開閉や、スマホ表示でだけ要素を隠すといった用途でよく使われます。
/* スマホ幅でだけメニューを隠す例 */
@media (max-width: 600px) {
.pc-menu {
display: none;
}
}似たプロパティに visibility: hidden があります。こちらは要素を見えなくしますが、場所はそのまま残る点が display: none との大きな違いです。完全に詰めて消したいなら display: none、隠すけれどスペースは確保したいなら visibility: hidden と使い分けます。
width が効かないときに見直すこと
span や a に width や上下の margin を指定したのに反映されない、という相談はとても多いです。原因のほとんどは、その要素が inline のままになっていることです。インライン要素はサイズ指定を受け付けないため、いくら width を書いても無視されます。
対処は、用途に合わせて display を変えることです。文章の流れに乗せたまま大きさを持たせたいなら inline-block、独立した箱として縦に積みたいなら block を指定します。「サイズが効かない＝まず display を疑う」と覚えておくと、原因にたどり着きやすくなります。
まとめ
display は要素の並び方とサイズの効き方を決める、レイアウトの基礎となるプロパティです。基本の4つの値を整理します。
block：縦に積まれ、幅・高さを指定できる（div・p など）。inline：横に流れ、幅・高さや上下marginは効かない（span・a など）。inline-block：横に並びつつ、幅・高さも指定できる。none：表示されず、場所も取らない（visibility: hidden は場所が残る）。
まずは「width が効かないときは display を確認する」ことから始めてみてください。block と inline の違いが体に入ると、Flexbox や Grid といった発展的なレイアウトの理解もぐっと楽になります。