「HTMLで文章と文章の間に空白を入れたい」
「改行や空白行を入れて見た目を整えたいけど、うまくいかない…」
「WordやExcelみたいに簡単に空白行が作れない」
Webページを作っていると、こんなふうに空白行を入れたい場面がよくあります。
でもHTMLはテキストエディタの見た目どおりに空白行を反映してくれるわけではありません。
この記事では、HTMLで空白行を作る正しい方法を初心者向けにやさしく解説します。
間違った方法とその問題点、そして実際の現場で使われるベストプラクティスまで詳しく紹介します。
そもそもHTMLは空白に厳しい？
HTMLの空白処理の仕組み
HTMLには「空白の正規化」という仕組みがあります。
これは、複数の空白文字（スペース、タブ、改行など）を1つの空白として扱うルールです。
エディタ上の改行は無視される
実際に例を見てみましょう：
エディタで書いたHTML
<p>こんにちは</p>
<p>世界</p>
ブラウザでの表示結果
こんにちは
世界
このように書いても、ブラウザでは単に段落が変わっただけです。何行空けても、実際には「1段落分の余白」しか表示されません。
なぜこうなるの？
HTMLは「文書の構造」を表現する言語であり、「見た目」は主にCSSで制御するという設計思想があります。そのため、空白文字による視覚的な調整は基本的に無視されます。
HTMLで空白行を作る方法
brタグを使う方法
基本的な使い方
<p>こんにちは<br><br>世界</p>
brタグを2回連続で入れると、1行分の空白行を作れます。
より多くの空白行が必要な場合
<p>文章1</p>
<br><br><br>
<p>文章2</p>
3つのbrタグで2行分の空白を作ることができます。
brタグのメリット・デメリット
メリット
- 簡単に書ける
- すぐに効果が確認できる
- HTMLだけで完結する
デメリット
- 見た目のためだけの要素なので、意味的に適切ではない
- レスポンシブデザインで崩れやすい
- メンテナンスが大変
空のpタグを使う方法
基本的な書き方
<p>こんにちは</p>
<p> </p>
<p>世界</p>
は「改行されないスペース」という特殊文字です。完全に空の<p></p>だと、ブラウザによっては表示されない場合があるため、この文字を入れます。
CSSと組み合わせる場合
<p>こんにちは</p>
<p class="spacer"></p>
<p>世界</p>
.spacer {
height: 50px;
margin: 0;
padding: 0;
}
この方法の問題点
- SEO的にあまり推奨されない（意味のない段落を作ってしまう）
- アクセシビリティの観点でも好ましくない
- コードが読みにくくなる
CSSで余白を調整する正しい方法
marginを使った基本的な方法
<p>こんにちは</p>
<p class="space-top">世界</p>
.space-top {
margin-top: 50px;
}
margin-bottomを使う場合
<p class="space-bottom">こんにちは</p>
<p>世界</p>
.space-bottom {
margin-bottom: 50px;
}
様々なサイズの空白クラス
.space-small {
margin-bottom: 20px;
}
.space-medium {
margin-bottom: 40px;
}
.space-large {
margin-bottom: 80px;
}
.space-xl {
margin-bottom: 120px;
}
使用例
<p class="space-medium">小さな段落</p>
<p class="space-large">大きな段落</p>
<p>普通の段落</p>
実践的な空白行の作り方
ダミーのdivを使う方法
どうしても空白だけを入れたい場合は、以下の方法があります：
<div class="spacer-block"></div>
.spacer-block {
height: 30px;
}
この方法は、レイアウト調整でよく使われますが、使いすぎるとHTMLがごちゃごちゃするので注意が必要です。
セクション間の空白を作る
実際のWebサイトでは、セクション間の空白を作ることが多いです：
<section class="intro">
<h2>はじめに</h2>
<p>ここは導入部分です。</p>
</section>
<section class="content">
<h2>本文</h2>
<p>ここは本文です。</p>
</section>
.intro {
margin-bottom: 60px;
}
.content {
margin-top: 40px;
}
レスポンシブ対応の空白
デバイスごとに空白のサイズを変える場合：
.responsive-space {
margin-bottom: 20px;
}
@media (min-width: 768px) {
.responsive-space {
margin-bottom: 40px;
}
}
@media (min-width: 1024px) {
.responsive-space {
margin-bottom: 60px;
}
}
よくある間違いと対処法
連続するbrタグの問題
間違った例
<p>文章1</p>
<br><br><br><br><br>
<p>文章2</p>
この書き方は以下の問題があります：
- コードが読みにくい
- レスポンシブ対応が困難
- 意味的に正しくない
正しい修正方法
<p class="large-bottom-space">文章1</p>
<p>文章2</p>
.large-bottom-space {
margin-bottom: 100px;
}
インライン要素での空白問題
問題のあるコード
<span>テキスト1</span>
<br><br>
<span>テキスト2</span>
インライン要素とブロック要素を混在させると、予期しないレイアウトになる場合があります。
適切な解決方法
<div>
<span>テキスト1</span>
</div>
<div class="space-top">
<span>テキスト2</span>
</div>
.space-top {
margin-top: 40px;
}
特殊な空白文字について
よく使われる空白文字
| 文字 | HTML実体参照 | 説明 |
|---|---|---|
| 通常のスペース | | 改行されないスペース |
| 半角スペース |   | 普通の半角スペース |
| 全角スペース | 　 | 日本語の全角スペース |
実際の使用例
<!-- 改行されないスペースで単語を繋げる -->
<p>100 km/h で走行</p>
<!-- 日本語文書での字下げ -->
<p>　　段落の始まりです。</p>
現代的なCSS手法
CSS Gridを使った空白制御
<div class="grid-container">
<div class="content">コンテンツ1</div>
<div class="spacer"></div>
<div class="content">コンテンツ2</div>
</div>
.grid-container {
display: grid;
grid-template-rows: auto 60px auto;
}
.spacer {
grid-row: 2;
}
Flexboxを使った空白制御
<div class="flex-container">
<div>コンテンツ1</div>
<div class="flex-spacer"></div>
<div>コンテンツ2</div>
</div>
.flex-container {
display: flex;
flex-direction: column;
}
.flex-spacer {
height: 50px;
}
CSS Custom Properties（CSS変数）の活用
:root {
--space-xs: 8px;
--space-sm: 16px;
--space-md: 32px;
--space-lg: 64px;
--space-xl: 128px;
}
.space-medium {
margin-bottom: var(--space-md);
}
.space-large {
margin-bottom: var(--space-lg);
}
SEOとアクセシビリティへの配慮
SEOに優しい空白の作り方
検索エンジンは意味のないHTMLタグを嫌うため、以下の点に注意しましょう：
- 空のpタグやdivタグは極力避ける
- brタグの連続使用は控える
- CSSで空白を制御することを優先する
アクセシビリティを考慮した書き方
スクリーンリーダーなどの支援技術を使う方のため：
<!-- 良い例：意味のある区切り -->
<section>
<h2>セクション1</h2>
<p>内容1</p>
</section>
<section class="section-spacer">
<h2>セクション2</h2>
<p>内容2</p>
</section>
<!-- 悪い例：意味のない空白 -->
<div> </div>
<div> </div>
トラブルシューティング
よくある問題と解決法
marginが効かない場合
原因: インライン要素にmarginを指定している 解決法: display: block または display: inline-block を追加
.space-top {
display: block;
margin-top: 20px;
}
marginが思ったより小さく表示される
原因: マージンの相殺（margin collapse）が発生している 解決法: paddingを使うか、要素間にborderやpaddingを挟む
/* marginの相殺を避ける方法 */
.avoid-collapse {
padding-top: 1px;
margin-top: 19px; /* 合計20px */
}
レスポンシブで空白が崩れる
原因: 固定値で空白を指定している 解決法: 相対値やメディアクエリを使用
.responsive-space {
margin-bottom: 5vw; /* ビューポート幅の5% */
}
@media (max-width: 768px) {
.responsive-space {
margin-bottom: 20px;
}
}
実際のプロジェクトでの活用例
ブログ記事のレイアウト
<article class="blog-post">
<header class="post-header">
<h1>記事タイトル</h1>
<time>2025年1月15日</time>
</header>
<div class="post-content">
<p class="intro">導入文です。</p>
<section class="content-section">
<h2>見出し1</h2>
<p>本文1</p>
</section>
<section class="content-section">
<h2>見出し2</h2>
<p>本文2</p>
</section>
</div>
</article>
.post-header {
margin-bottom: 40px;
}
.intro {
margin-bottom: 60px;
font-size: 1.1em;
}
.content-section {
margin-bottom: 50px;
}
.content-section:last-child {
margin-bottom: 0;
}
ランディングページのセクション分け
.hero-section {
margin-bottom: 80px;
}
.feature-section {
margin: 100px 0;
}
.cta-section {
margin-top: 120px;
}
ベストプラクティス
推奨される方法
- CSSのmarginやpaddingを使う
- 意味のあるHTMLタグで構造化
- CSS変数で空白のサイズを統一管理
- レスポンシブ対応を考慮
避けるべき方法
- 連続するbrタグ
- 空のpタグやdivタグ
- 固定サイズでの空白指定
- 意味のない空白文字の多用
まとめ
HTMLで空白行を作る方法をまとめると：
基本的な考え方
- HTMLはソース上で改行や空白行を入れても、ブラウザには反映されない
- 見た目の調整はCSSで行うのが正しいアプローチ
- 意味のある文書構造を保ちながら空白をコントロール
推奨する方法
- CSSの
marginやpaddingで余白を管理 - レスポンシブ対応を考慮した相対値の使用
- CSS変数で空白サイズの統一管理
緊急時の対処法
<br>タグは最小限に留める- 空白専用のdivを使う場合は適切なクラス名を付ける
注意点
- SEOとアクセシビリティへの配慮
- マージンの相殺やレスポンシブでの崩れに注意
- プロジェクト全体で統一したルールを適用
コメント