目次
はじめに
HTML/CSSを学ぶと出てくる「ブロック要素」と「インライン要素」。「幅を指定しても効かないのはなぜ？」「改行される・されないの違いは？」と戸惑いますよね。この記事では、両者の違い・代表的なタグ・display での切り替えまで、コード付きでやさしく解説します！
ブロック要素とインライン要素の違い
- ブロック要素：横幅いっぱいに広がり、前後で改行。幅・高さの指定OK（例：
<div><p><h1><section>） - インライン要素：内容の幅だけ、改行されない。幅・高さの指定は基本効かない（例：
<span><a><strong>）
ブロック要素の特徴
<p>これは段落です。</p>
<p>これは次の段落です。</p><p> はブロック要素なので、2つの段落は縦に並びます。背景色をつけると横幅いっぱいに広がります。
インライン要素の特徴
<p>これは<a href="#">リンク</a>と<strong>強調</strong>です。</p><a> や <strong> は文章の流れの中に横並びで収まり、改行されません。
displayで性質を切り替えられる
「インライン要素だけど幅と高さを持たせたい」というときは inline-block が便利です。
.btn {
display: inline-block; /* 横並びのまま幅・高さが効く */
width: 200px;
height: 50px;
}| display値 | 改行 | 幅・高さ |
|---|---|---|
| block | する | 効く |
| inline | しない | 効かない |
| inline-block | しない | 効く |
使い分け
- レイアウトの構造（セクション・コンテナ）→ ブロック要素
- 文章の一部の装飾・リンク → インライン要素
今は横並びに「inline-block」より「Flexbox」
かつては要素を横並びにするのにinline-blockがよく使われましたが、HTMLのタグ間の改行が“謎の隙間”になるという有名な落とし穴があります。私もこの隙間の正体が分からず何時間も溶かしました…。
今は横並びならFlexboxを使うのが主流で、この隙間問題に悩むこともありません。
.row {
display: flex;
gap: 16px; /* 隙間も自由にコントロール */
}とはいえ「ブロックとインラインの性質の違い」を理解していないと、Flexboxを使っても崩れの原因が掴めません。土台としてこの知識はずっと役立ちます。
つまずき：inline要素に幅・高さが効かない
<span>や<a>にwidthやheightを指定しても効かないのは、インライン要素の仕様です。サイズを与えたいときはdisplay: inline-block;（またはblock）に変えればOK。「効かない＝性質のせい」と気づけると、原因究明がぐっと速くなります。
まとめ
- ブロック＝全幅・改行あり・サイズ指定OK
- インライン＝内容幅・改行なし・サイズ指定NG
inline-blockなら両者の"いいとこ取り"ができる
要素の性質を理解すると、レイアウト崩れの原因がすぐ見抜けるようになります。学習や制作で行き詰まったら、ポートフォリオやココナラもどうぞ。
