なぜか「幅」が効かない？CSSのdisplayプロパティでつまずくあなたへ
Web制作を始めたばかりの頃、誰もが一度はこんな経験をします。「``タグに幅（width）を指定したのに、なぜか反映されない！」「隣の要素とくっついてしまって、余白がうまく取れない…」
これ、実はあなたのコードが間違っているわけではありません。HTML要素が元々持っている「性格」のせいなんです。
今日は、フロントエンド開発の現場でも基礎中の基礎、でも意外と奥が深い「displayプロパティ」による要素の変身術について、一緒に紐解いていきましょう。
—
1. 要素には「性格」がある：インラインとブロックの違い
Webページを組み立てるHTML要素は、大きく分けて2つのタイプ（性格）を持っています。
ブロックレベル要素（例：` `, ` `, ` `）
この子たちは「一軒家」のような存在です。
- 性格： 自己主張が激しいです。横に誰も立たせません。
- 特徴： 何もしなくても横幅いっぱいに広がり、次の要素は必ず改行されて下に配置されます。
- できること： `width`（幅）や `height`（高さ）、上下の余白（margin）が自由自在に設定できます。
インライン要素（例：``, ``, ``）
一方で、この子たちは「文章の中の単語」のような存在です。
- 性格： とても控えめです。横に並ぶのが大好き。
- 特徴： 必要最低限の幅しか持ちません。文章の一部として流れるため、幅や高さ、上下の余白を無理やり指定しようとしても無視されてしまいます。
「えっ、じゃあどうすればいいの？」と不安になりますよね。大丈夫、ここで登場するのが `display` プロパティという魔法の杖なんです。
—
2. 魔法の杖 `display` で性格を変えてみる
CSSの `display` プロパティを使うと、要素の性格をガラッと変えることができます。
inline-block：いいとこ取りのハイブリッド
「インラインのように横に並んでほしいけど、ブロックのように幅や高さも設定したい！」という、わがまま（でもよくある）要望を叶えてくれるのが `inline-block` です。
イメージで例えると：
お弁当箱の中の「おかずカップ」です。カップ同士は横に並びますが、中身のサイズ（幅や高さ）はしっかりキープできますよね。
/ 例：リンクボタンを横並びにしつつ、サイズを整える /
.btn {
display: inline-block; / これで幅と高さが効くようになる！ /
width: 120px;
height: 40px;
background: #ffcc00;
margin: 10px; / 上下の余白もバッチリ効きます /
text-align: center;
}
inline-flex：最新の横並びテクニック
最近の現場では、横並びには `display: flex;`（flexbox）を使うのが主流です。その中でも「文章の一部として横並びを制御したい」という時には `inline-flex` が便利です。
—
3. 実践！コードで見てみよう
実際にエディタに貼り付けて試してみてください。`inline-block` がいかに便利か、一目でわかるはずです。
項目 2
項目 3
ポイント：
`display: inline-block;` を消すと、幅や高さが無視され、ただの文字の塊になってしまいます。これが「インライン要素の本来の姿」なんです。
—
4. 最後に：つまずくのは理解している証拠
「CSSって難しい…」と感じているなら、それはあなたが「要素の挙動をコントロールしよう」と真剣に向き合っている証拠です。
- 横に並べたいなら `inline` 系
- ガッツリ箱として扱いたいなら `block` 系
- その中間で調整したいなら `inline-block`
まずはこの3つを使い分けることから始めてみてください。完璧に暗記する必要なんてありません。何回も書いて、ブラウザで確認して、「あれ、おかしいな？」と思ったらまた調整する。その繰り返しこそが、一番の近道です。
さあ、次はどんなレイアウトに挑戦してみますか？応援しています！
コメント