インライン要素・ブロック要素 の違い
初級読み方：インラインようそ・ブロックようそ のちがい｜英語：inline element vs block element
ブロック要素は前後で改行され横幅いっぱいに広がる。インライン要素は文の流れの中に入り改行されない。
やさしい説明
ブロック要素は横幅いっぱいに広がり、前後に改行が入ります。インライン要素は文章の中に並び、必要な幅だけ使います。
ブロック要素は「段ボール箱」のイメージ。1つずつ縦に積み上がります。インライン要素は「文中の付箋」のイメージ。文章の流れの中に横並びで入ります。
div、p、h1はブロック要素。span、a、strongはインライン要素です。CSSの display プロパティで変更することもできます。
具体例・使い方
<!-- ブロック要素: 縦に積まれる -->
<div>箱1（横幅いっぱい）</div>
<div>箱2（横幅いっぱい）</div>
<!-- インライン要素: 横に並ぶ -->
<p>これは<strong>重要な</strong>お知らせです。</p>
<!-- CSSで表示を変更できる -->
<!-- display: inline-block → 横並び＋幅指定可能 -->一覧で比較
| ブロック要素 | インライン要素 | |
|---|---|---|
| 並び方 | 縦に積まれる | 横に並ぶ |
| 横幅 | 親いっぱいに広がる | 中身の分だけ |
| width/height | 効く | 効かない |
| 上下のmargin | 効く | 効かない（左右のみ） |
| 代表タグ | div, p, h1, ul, section | span, a, strong, img |
いつ使う？
- ブロック要素 — ヘッダー・セクションなどページの大きな区画
- ブロック要素 — 縦に並べたいカードやボタンのまとまり
- インライン要素 — 文中の一部を太字・リンク・色変更したいとき
- inline-block — 横並びにしつつ幅も指定したいとき（両者のいいとこ取り）
display プロパティで切り替えられます。display: block で横幅いっぱい、display: inline で文中並び、display: inline-block で「横並び＋幅指定OK」。最近は display: flex で横並びを作ることも多いです。
間違いやすいポイント
❌ インライン要素にwidth/heightを指定しても効かない
spanやaに width を指定しても無視されます。効かせたい場合は display: inline-block を追加しましょう。
❌ インライン要素の中にブロック要素を入れる
<span><div>...</div></span> はルール違反です。「ブロックの中にインラインを入れる」のが正しい順番。例外として <a> は中にブロックを入れてもOKです。
よくある疑問
Q: 代表的なブロック要素は？
A: div、p、h1〜h6、ul、liなどです。1つの「かたまり」を作る要素です。
Q: 代表的なインライン要素は？
A: span、a、strong、img、inputなどです。文章の中に入る要素です。
Q: CSSで変更できる？
A: はい。display: blockやdisplay: inlineで表示方法を変えられます。
関連用語
📖 関連レッスン
レッスンを見る →