目次
- はじめに：改行と余白は「別物」です
- 結論：改行はHTML、余白はCSS
- HTMLにおける改行とは何か
- brタグの正しい使い方
- brの特徴
- 向いているケース
- brを余白調整に使ってはいけない理由
- pタグは「段落」を表す
- なぜpタグは余白が広いのか
- 余白を調整する方法
- line-heightで行間を調整する
- marginとpaddingの違い
- margin
- padding
- DevToolsで確認する方法
- スマホ崩れの原因
- 横スクロールが出るケース
- よくある初心者の勘違い
- 改行＝余白と思っている
- 見た目をHTMLで調整しようとする
- 改行と余白の正しい使い分け
- 実務でおすすめの基本セット
- なぜ構造と見た目を分けるべきか
- まとめ：レイアウト崩れの9割は役割の混同
はじめに：改行と余白は「別物」です
HTMLを書き始めたとき、多くの人が混乱します。
- 改行したら余白が広くなった
- brを入れたのに思ったより詰まっている
- pタグを使うと勝手にスペースが空く
これ、全部「仕様」です。
バグではありません。
原因は一つ。
改行と余白を同じものだと思っていること。
この記事では、改行と余白の仕組みを整理し、実務で迷わないための考え方を解説します。
結論：改行はHTML、余白はCSS
まず最初に覚えておくべき原則です。
- 行を変える → HTML（br / p）
- 空間を作る → CSS（margin / padding）
- 行間を広げる → line-height
ここを混同すると、レイアウトは必ず崩れます。
HTMLにおける改行とは何か
改行とは、「テキストの表示位置を次の行へ送ること」です。
余白とは違います。
brタグの正しい使い方
<p>東京都渋谷区<br>神南1-2-3</p>brの特徴
- 強制的に改行する
- 余白はほとんど増えない
- 意味のある改行に使う
向いているケース
- 住所
- 詩
- 歌詞
- 意図的な改行表現
brを余白調整に使ってはいけない理由
初心者がやりがちな例：
文章1<br><br><br>文章2これをやると、
- レスポンシブで崩れる
- デザインが不安定
- 保守性が極端に悪い
見た目が整っても、それは偶然です。
pタグは「段落」を表す
<p>文章1</p>
<p>文章2</p>pタグは改行ではなく、
段落を作るタグです。
なぜpタグは余白が広いのか
ブラウザにはデフォルトCSSがあります。
p {
margin-top: 1em;
margin-bottom: 1em;
}つまり、
余白はCSSが作っている。
余白を調整する方法
p {
margin: 8px 0;
}または
p {
margin-bottom: 12px;
}余白はCSSで管理します。
line-heightで行間を調整する
行間が詰まって読みにくいときは、brを増やしてはいけません。
p {
line-height: 1.8;
}これが正解です。
marginとpaddingの違い
margin
要素の「外側」の余白
padding
要素の「内側」の余白
混同すると、背景色がズレます。
DevToolsで確認する方法
余白がおかしいときは必ず確認。
- Elementsで要素を選択
- Box Modelを見る
- margin・paddingを確認
レイアウトの答えは必ず表示されています。
スマホ崩れの原因
よくあるのはこれ。
- br連打
- 固定margin大量指定
- px単位の乱用
特にスマホでは崩れやすい。
横スクロールが出るケース
- paddingを大きくしすぎ
- width指定とpadding併用
- box-sizing未設定
対策：
* {
box-sizing: border-box;
}よくある初心者の勘違い
改行＝余白と思っている
違います。
見た目をHTMLで調整しようとする
それはCSSの役割。
改行と余白の正しい使い分け
| 目的 | 方法 |
|---|---|
| 行を変える | br |
| 段落を作る | p |
| 空間を作る | margin |
| 行間を広げる | line-height |
実務でおすすめの基本セット
body {
line-height: 1.8;
}
p {
margin-bottom: 16px;
}これだけで、かなり読みやすくなります。
なぜ構造と見た目を分けるべきか
HTMLは意味を持たせる。
CSSは見た目を整える。
この分離ができると、
- 保守性が上がる
- スマホ崩れが減る
- デザイン変更が楽
まとめ：レイアウト崩れの9割は役割の混同
改行と余白は違います。
覚えておくべきことはこれだけ。
- 改行はHTML
- 余白はCSS
- 行間はline-height
brを連打するのをやめるだけで、
レイアウトは一気に安定します。
まずは余白をCSSで管理する習慣をつけてみてください。