Web制作を始めると必ず出てくるのが 「インライン要素」と「ブロック要素」 という言葉です。 しかし、初学者にとっては「何が違うの？」「どう使い分ければいいの？」と迷いやすいポイントでもあります。
この記事では、初心者でも直感的に理解できるように、図解イメージ付きでわかりやすく解説します。
インライン要素とは？
インライン要素（inline） は、文章の一部として扱われる要素です。
文章の流れを壊さず、横方向に並んでいくのが特徴です。
インライン要素の特徴
- 横に並ぶ
- 要素の前後で改行されない
- 幅や高さを自由に指定しにくい
- 文章の一部として扱われる
代表的なインライン要素
<span>：汎用的なインライン要素<a>：リンク<strong>：強調<img>：画像<em>：強調（斜体）
ブロック要素とは
ブロック要素（block） は、ひとつの“箱”として扱われる要素です。 要素の前後で自動的に改行され、縦方向に積み重なっていきます。
ブロック要素の特徴
- 前後で自動的に改行される
- 幅や高さを自由に指定できる
- レイアウトの基礎となる要素が多い
- 大きなまとまりを作るのに向いている
代表的なブロック要素
<div>：汎用的なブロック要素<p>：段落<h1>〜<h6>：見出し<ul> / <ol>：リスト<header> / <footer>：セクション要素
インライン要素とブロック要素の違い
| 種類 | 改行 | 幅・高さ | 用途 |
| インライン要素 | 改行されない | 指定しにくい | 文章の一部 |
| ブロック要素 | 自動で改行される | 指定しやすい | レイアウトの箱 |
どちらを使えばいいの？
文章の一部 ：インライン要素
例：リンク、強調、画像など
レイアウトの箱 ：ブロック要素
例：見出し、段落、セクション、コンテンツのまとまり
初心者のつまずきポイント
「インライン要素に width を指定しても効かない」
インライン要素は文章の一部として扱われるため、幅や高さの指定が効きません。
必要な場合は display: inline-block; を使うと解決します。
「ブロック要素が勝手に改行される」
ブロック要素は“箱”なので、前後で改行されるのが仕様です。 横並びにしたい場合は flex や grid を使いましょう。
まとめ：インライン要素とブロック要素を理解するとHTMLが一気にわかりやすくなる
インライン要素とブロック要素の違いは、HTMLの基礎でありながら、レイアウトを理解するうえで非常に重要です。
- インライン要素 → 文章の一部
- ブロック要素 → レイアウトの箱
この違いを押さえるだけで、HTML/CSS の理解がぐっと深まります。
