第5章：なぜ横に並ばないの？レイアウトの基礎「displayプロパティ」
こんにちは！前回の第4章では、色やサイズを変更するプロパティについて学びました。
【CSS実践】ブログのデザインが変わる！頻出プロパティと「余白」の完全攻略ガイド - 月影
今回は、CSSを学ぶ人が最初にぶつかる壁、「レイアウト」のお話です。
「画像を横並びにしたいのに、なぜか縦に並んでしまう…」
「幅（width）を指定しているのに、全然効かない…」
こんな経験はありませんか？実はこれ、すべてのHTML要素にあらかじめ決められた「display（ディスプレイ）」という設定のしわざなんです。ここを理解すれば、要素の並び順を自由にコントロールできるようになります！
🗝 レイアウトを決めるマスターキー「display」
HTMLのタグは、生まれつき「ブロックレベル要素」か「インライン要素」のどちらかの性質を持っています。
この性質を決めているのが display プロパティです。主要な3つの値をマスターしましょう。
1. display: block;（積み木タイプ）
特徴：画面の横幅いっぱいに広がり、縦に積み重なっていきます。
代表的なタグ： <div>, <p>, <h1>〜<h6>, <ul>
ブロック要素 1
ブロック要素 2
幅を50%にしても…
（↑幅を縮めても、右側に強制的な改行が入るため横には並びません）- できること
- 幅（width）、高さ（height）、余白（margin/padding）すべて自由に指定できます。
2. display: inline;（文章タイプ）
特徴：文章の一部として扱われ、横に流れるように並びます。改行されません。
代表的なタグ： <a>, <span>
これは文章です。インライン要素1と、 インライン要素2は、 このようにリンクのように文中に混ざります。
- 注意点（初心者がよくハマる罠！）
- 幅（width）や高さ（height）を指定しても無視されます。
また、上下のマージン（margin-top/bottom）も効きません（左右は効きます）。
「ボタンの大きさを変えたいのに変わらない！」という時は、だいたいこれが原因です。
3. display: inline-block;（ハイブリッドタイプ）
特徴：「横に並びたい」けど「サイズも指定したい」。そんな良いとこ取りをした設定です。
元々ブロック要素やインライン要素だったものを、CSSで display: inline-block; に書き換えてよく使います。
Box 1
Box 2
Box 3
.box {
display: inline-block; /* 横並びになりつつ */
width: 100px; /* サイズ指定も効く！ */
height: 60px;
}👻 覚えておきたい：display: none;
もう一つ、実務で頻出する重要な値があります。
- display: none;
- 要素を「存在しなかったこと」にします。
visibility: hidden;（見えなくなるだけで場所は取る）とは違い、場所ごと消滅します。
スマホで見た時だけPC用のメニューを消す、といった「レスポンシブデザイン」で非常によく使います。
