Web制作を学びはじめて間もない頃、aタグにwidthを指定しても効かない、margin-topをつけたのに余白ができない…そんな経験をした方も多いはず。これらの原因の多くは、「インライン要素とブロック要素の違い」を正しく理解していないことから起こります。
この記事では、現役フロントエンドエンジニアの視点から、初心者が混乱しやすいポイントを丁寧に解説しながら、インライン要素とブロック要素の違いと使い分けをわかりやすく紹介します。
インライン要素とブロック要素ってなに？
インライン要素とは？
インライン要素は、文の中に溶け込むように表示される要素です。代表的なものに<a>、<span>、<strong>などがあります。
- 横に並ぶ
- 要素の中身（テキストなど）に応じたサイズになる
widthやheightが効かないmarginやpaddingは左右には効くが、上下には効きづらい
ブロック要素とは？
ブロック要素は、ページの中でひとつの「箱」として振る舞い、縦に積み重なっていく要素です。代表的なものに<div>、<p>、<h1>〜<h6>などがあります。
- 幅は自動で100%になる（親に依存）
- 高さや幅を指定できる
- 自動的に改行される
図解・比較（例）
<!-- インライン要素 -->
<a href="#">リンク</a>
<span>テキスト</span>
<!-- ブロック要素 -->
<div>ボックス1</div>
<p>段落テキスト</p>CSSで次のように指定しても、違いが明確に出ます
a {
width: 100px;
height: 40px;
background: lightblue;
}この場合、見た目にはサイズが変わらない（＝width, height が効かない）
初心者がよく混乱するポイント5選
1. インライン要素に margin-top が効かない
インライン要素は上下方向の余白をうまく持てません。代わりに padding を使うか、display: inline-block に変更するのが現実的です。
2. aタグに width を指定しても効かない
<a> はインライン要素なので、明示的に display: inline-block や block に変えないとサイズが指定できません。
a {
display: inline-block;
width: 120px;
background: #eee;
}3. inline と inline-block の違いがわからない
inline: サイズ指定できない。上下marginが効きにくいinline-block: インラインのように並ぶが、サイズ指定は可能
4. Flex や Grid と併用すると混乱する
display: flex の子要素になると、もともとのインライン/ブロックの影響が弱まります。つまり、レイアウトの“親”が強い。
5. 要素を横並びにしたいときの選択肢
display: inline-blockfloatflexやgrid→ どれを使うかはケースによって変わります
どう使い分ければいいの？
目的別に選ぼう
- テキストの一部だけ強調 →
<span>（インライン） - セクションとしてまとめたい →
<div>（ブロック） - 全体をクリック可能にしたい →
<a>にdisplay: blockをつけて対応
display を変えれば挙動も変わる
インライン要素をブロック化するには：
span {
display: block;
}逆に、ブロック要素をインライン風にしたい場合：
div {
display: inline;
}応用編：text-align と inline-block の合わせ技
aタグを中央寄せ・右寄せ・左寄せしたいとき
インライン要素は text-align の影響を受けます。その性質を活かすと、以下のように親要素に text-align を指定することで、リンクやボタンの配置が簡単になります。
<div class="wrap" style="text-align: center;">
<a href="#" style="display: inline-block; padding: 10px 20px; background: #333; color: #fff;">ボタン</a>
</div>
<div class="wrap" style="text-align: left;">
<a href="#" style="display: inline-block; padding: 10px 20px; background: #333; color: #fff;">ボタン</a>
</div>
<div class="wrap" style="text-align: right;">
<a href="#" style="display: inline-block; padding: 10px 20px; background: #333; color: #fff;">ボタン</a>
</div>この方法を使うと、特に横幅が決まっていないボタンなどを直感的に中央配置・右寄せ・左寄せできるようになります。
補足：文字の下線の違いにも注意！
インライン要素とブロック要素では、テキストの装飾にも違いが出ます。よくあるのが「下線」。
text-decoration: underline; の例
これはテキストに対しての下線で、インライン要素に自然に適用されます。
a {
text-decoration: underline;
}border-bottom を使った下線風の例
こちらは要素全体のボックスに対しての線なので、display: inline-block や block にしないとテキストサイズに合わせて表示されません。
a {
display: block;
border-bottom: 1px solid #000;
text-decoration: none;
}装飾の自由度は border-bottom の方が高いですが、思った通りに表示するには display の指定がセットで必要です。
実案件でよく使うパターンと注意点
ボタンは a？ button？ div？
a：ページ遷移するリンクbutton：フォーム送信やUI操作用div：非推奨（意味を持たせるべき）
→ アクセシビリティを考えるなら適切なタグ選びは重要です
リンク全体を押せるようにするには？
a {
display: block;
padding: 1em;
background: #f2f2f2;
}まとめ｜displayを理解すればCSSがぐっと楽になる
- インライン要素とブロック要素の違いは、CSSの効き方に直結します
- width, height, margin が効かないときは display を見直そう
- 初学者の壁を越えると、CSS設計がぐっと楽になります
コメント