はじめに
「width を指定したのに幅が変わらない」「上下の margin が効かない」「要素を横並びにしたいのにうまくいかない」——CSSを触り始めたころ、こういう現象に何度もハマった記憶があります。
当時の自分に教えてあげたかった。 これらのほとんどは、ブロック要素とインライン要素の違い を知っているだけで解決するのです。
この概念を知っておくと：
- なぜ CSS が効かないのかが素早く判断できる
- 修正箇所が一発でわかる
- ブラウザの開発者ツールで「どこを見ればいいか」が分かる
逆に知らないまま触っていると、試行錯誤で時間を溶かすことになります。昔の自分がまさにそうでした。
ブロック要素とインライン要素、ざっくり言うと
HTML の要素はデフォルトで ブロック か インライン のどちらかの表示方式を持っています。
| ブロック要素 | インライン要素 | |
|---|---|---|
| 並び方 | 縦に積み重なる | 横に並ぶ |
| 幅 | 親要素いっぱいに広がる | コンテンツの幅だけ |
width / height
|
効く | 効かない |
margin（上下） |
効く | 効かない |
padding（上下） |
効く | 見た目には広がるが周囲を押しのけない |
line-height |
効く | 効く（インラインでも有効） |
| 代表的なタグ |
<div> <p> <h1>〜h6> <ul> <li> <table>
|
<span> <a> <strong> <em>
|
ブロック要素
<div>div（ブロック）</div>
<div>div（ブロック）</div>
┌────────────────────────────────────┐
│ div（ブロック） │
└────────────────────────────────────┘
┌────────────────────────────────────┐
│ div（ブロック） │
└────────────────────────────────────┘
<div> はデフォルトでブロック要素です。何もしなくても幅が親要素いっぱいに広がり、次の要素は下に続きます。
width height margin padding はすべて期待通りに効きます。
インライン要素
<span>span（インライン）</span>
<span>span（インライン）</span>
┌─────────────────────┐┌─────────────────────┐
│ span（インライン） ││ span（インライン） │
└─────────────────────┘└─────────────────────┘
<span> はデフォルトでインライン要素です。横に並び、コンテンツの幅だけを占めます。
インライン要素で効かない CSS
span {
width: 200px; /* 効かない */
height: 100px; /* 効かない */
margin-top: 20px; /* 効かない */
margin-bottom: 20px; /* 効かない */
padding-top: 20px; /* 見た目には広がるが上下の要素を押しのけない */
line-height: 2; /* 効く（インラインでも有効） */
}
これが「なんでこの CSS 効かないんだろう」と悩みがちなパターンの正体です。
display プロパティで切り替えられる
表示方式は CSS の display プロパティで変更できます。これが解決の鍵です。
インライン要素にサイズや上下マージンを効かせたい → display: block
a {
display: block;
width: 200px;
margin-top: 20px; /* 効く */
}
リンクのクリック領域を縦横に広げたいときによく使います。
ブロック要素を横に並べつつサイズも指定したい → display: inline-block
div {
display: inline-block;
width: 100px;
height: 100px;
}
inline-block は「横に並ぶ（インラインの性質）」かつ「width / height が効く（ブロックの性質）」という、両方の性質を持ちます。
┌──────────┐┌──────────┐
│ div ││ div │
│ 100×100 ││ 100×100 │
└──────────┘└──────────┘
よくあるハマりパターン
パターン1：<span> に幅を指定しても変わらない
/* NG: span はインライン要素なので width が効かない */
span {
width: 200px;
}
/* OK: display を変える */
span {
display: inline-block; /* または block */
width: 200px;
}
パターン2：<a> タグのクリック領域が狭い
ナビゲーションメニューなどで、テキスト部分しかクリックできない場合。
/* NG */
a {
padding: 10px 20px; /* 上下 padding が周囲を押しのけない */
}
/* OK */
a {
display: block; /* または inline-block */
padding: 10px 20px;
}
パターン3：<div> を横並びにしたい
/* NG: div はブロック要素なので縦に積み重なる */
div {
width: 100px;
}
/* OK その1: inline-block */
div {
display: inline-block;
width: 100px;
}
/* OK その2: 親要素に flexbox（現代的な方法） */
.parent {
display: flex;
}
flexbox は横並び・中央揃え・余白の均等配置など、モダンなレイアウトのほぼすべてに対応できます。今から覚えるなら inline-block より flex を優先して覚えるのをおすすめします。
確認方法：ブラウザの開発者ツール
要素の display がどうなっているかはブラウザの開発者ツール（F12）で即確認できます。
- 確認したい要素を右クリック →「検証」（Inspect）
- 右側の「Computed」タブを開く
-
displayの値を確認する
「display: inline だから width が効かないんだな」と分かれば、修正の方針がすぐに立ちます。
整理すると
display: block → 縦に積み重なる。width/height/margin 全部効く
display: inline → 横に並ぶ。width/height/上下margin 効かない
display: inline-block → 横に並びつつ width/height も効く
display: flex → 子要素を柔軟に並べる（モダンレイアウトの主流）
新しい要素に CSS が効かないと感じたら、まず「この要素のデフォルトの display は何か」を確認するクセをつけると、デバッグの速度がぐっと上がります。
おわりに
ブロックとインラインの違いは、最初は地味に感じるかもしれませんが、知っているのと知らないのでは CSS を触るときのスピードと精度が大きく変わります。
過去の自分が「なんで効かないんだ」と悩んでいた時間を思うと、もっと早く知りたかったと今でも思います。
「width 効かないな」「横並びにならないな」と感じたとき、まずこの記事の表に立ち返ってみてください。
SIcore フレームワーク リンク
新人プログラマでも業務アプリ開発しやすいよう設計した、Javaフレームワークを公開しています。HTML・CSS・JavaScript・Java の構成がシンプルに整理されており、サンプルコードを動かしながら学べます。
- HP: https://onepg.com/ja/
- GitHub: https://github.com/sugaiketadao/sicore-ja
- サンプル画面の確認方法: https://github.com/sugaiketadao/sicore-ja#%EF%B8%8F-%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E7%94%BB%E9%9D%A2%E3%81%AE%E7%A2%BA%E8%AA%8D%E6%96%B9%E6%B3%95---vs-code
- AI開発の始め方: https://github.com/sugaiketadao/sicore-ja#-ai%E9%96%8B%E7%99%BA%E3%81%AE%E5%A7%8B%E3%82%81%E6%96%B9
関連記事リンク
他の記事もぜひご覧ください！
読んでいただきありがとうございました！
❤いいね！をしていただけると励みになります。