HTML
インライン要素・ブロック要素 の違い
初級読み方：インラインようそ・ブロックようそ のちがい｜英語：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を指定しても効かない
spanやaにwidthを指定しても無視されます。効かせたい場合は display: inline-block を追加しましょう。
❌ インライン要素の中にブロック要素を入れる
<span><div>...</div></span> はルール違反です。ブロックの中にインラインを入れるのが正しい順番です。
よくある疑問
Q: 代表的なブロック要素は？
A: div、p、h1〜h6、ul、liなどです。1つの「かたまり」を作る要素です。
Q: 代表的なインライン要素は？
A: span、a、strong、img、inputなどです。文章の中に入る要素です。
Q: CSSで変更できる？
A: はい。display: blockやdisplay: inlineで表示方法を変えられます。
関連用語
📖 関連レッスン
レッスンを見る →