ホームページやブログの記事を作っていて、
「ここに1行だけ空白を入れたい」
「見出しと文章の間を少しあけたい」
と思ったことはありませんか？
でもHTMLでは、文章の中でEnterキーで改行しても、ブラウザにはそのまま反映されません。
この記事では、HTMLで1行空ける（空白行を作る）ための基本的な方法を初心者向けにやさしく解説します。これを読めば、もう「どうやって間をあけるんだっけ？」と迷わなくなりますよ。
そもそもHTMLはEnterでは改行されない
HTMLの基本的な仕様
テキストエディタでHTMLを書いて：
こんにちは。
これは次の行です。
さらに空行をあけても
ブラウザでは連続した空白になります。
このように改行しても、ブラウザでは：
こんにちは。 これは次の行です。 さらに空行をあけても ブラウザでは連続した空白になります。
と1行にまとめられて表示されます。
なぜこうなるの？
HTMLは、以下のような仕様になっています：
| 入力 | ブラウザでの表示 |
|---|---|
| 複数の半角スペース | 1つの半角スペース |
| 複数の改行 | 1つの半角スペース |
| タブ文字 | 1つの半角スペース |
これはHTMLが構造を表現する言語だからです。見た目の調整は本来CSSの役割なので、HTMLでは余計な空白を無視するようになっています。
1行空けるもっとも簡単な方法：<br>タグ
<br>タグの基本的な使い方
<br>は改行を入れるタグです：
こんにちは。<br>
これは次の行です。
表示結果：
こんにちは。
これは次の行です。
1行分の空白を作るには
1行分しっかり空けたい場合は<br>を2つ続けます：
こんにちは。<br><br>
1行空けてから次の文章です。
表示結果：
こんにちは。
1行空けてから次の文章です。
<br>タグの特徴
| 特徴 | 説明 |
|---|---|
| 空要素 | 終了タグ不要（<br>のみ） |
| インライン要素 | 文章の途中でも使用可能 |
| 即座に効果 | CSSなしで改行が可能 |
<br>の実用例
<!-- 住所の表示 -->
<address>
〒123-4567<br>
東京都渋谷区○○1-2-3<br>
○○ビル5階
</address>
<!-- 詩や歌詞の表示 -->
<p>
空は青いよ<br>
風は涼しいよ<br>
今日もいい天気
</p>
<!-- 連絡先情報 -->
<div>
電話：03-1234-5678<br>
FAX：03-1234-5679<br>
Email：info@example.com
</div>
もっとスマートに空けたい場合：CSSで余白調整
marginプロパティの活用
<br>をたくさん並べるのはあまりきれいな方法ではありません。CSSでmarginを使うと、よりスマートに間を空けられます：
<h2 style="margin-bottom: 30px;">見出しです</h2>
<p>見出しの下に30ピクセル分の空白が入ります。</p>
margin の詳細設定
/* 上下左右すべてに余白 */
.space-all { margin: 20px; }
/* 上下のみ余白 */
.space-vertical { margin: 20px 0; }
/* 下のみ余白 */
.space-bottom { margin-bottom: 20px; }
/* 上のみ余白 */
.space-top { margin-top: 20px; }
/* 個別指定 */
.space-custom {
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 5px;
}
paddingとmarginの使い分け
<style>
.margin-example {
background-color: lightblue;
margin: 20px; /* 外側の余白 */
}
.padding-example {
background-color: lightgreen;
padding: 20px; /* 内側の余白 */
}
</style>
<!-- 外側に20pxの余白 -->
<div class="margin-example">margin で外側に余白</div>
<!-- 内側に20pxの余白 -->
<div class="padding-example">padding で内側に余白</div>
| プロパティ | 効果 | 使用場面 |
|---|---|---|
| margin | 要素の外側の余白 | 要素同士の間隔を空ける |
| padding | 要素の内側の余白 | 要素内のコンテンツとの間隔 |
空の<div>で空白を作る方法
高さ指定による空白作成
どうしても「ここに任意の高さの空白を入れたい」というときは：
<div style="height: 20px;"></div>
これで20ピクセル分の空白が入ります。
より実用的な空白用クラス
<style>
.spacer-small { height: 10px; }
.spacer-medium { height: 20px; }
.spacer-large { height: 40px; }
.spacer-xlarge { height: 60px; }
</style>
<p>上の段落</p>
<div class="spacer-medium"></div>
<p>下の段落（20px空いている）</p>
レスポンシブ対応の空白
<style>
.responsive-spacer {
height: 20px;
}
/* タブレット */
@media (max-width: 768px) {
.responsive-spacer {
height: 15px;
}
}
/* スマートフォン */
@media (max-width: 480px) {
.responsive-spacer {
height: 10px;
}
}
</style>
<p>上の段落</p>
<div class="responsive-spacer"></div>
<p>下の段落</p>
行間（line-height）の調整
文章内の行間を広げる
文章そのものの行間を調整したい場合はline-heightを使います：
<style>
.normal-line { line-height: 1.4; } /* 通常 */
.loose-line { line-height: 2.0; } /* ゆったり */
.tight-line { line-height: 1.2; } /* 詰まった感じ */
</style>
<p class="normal-line">
通常の行間で書かれた文章です。
複数行になったときの間隔が標準的です。
読みやすさとコンパクトさのバランスが取れています。
</p>
<p class="loose-line">
ゆったりした行間で書かれた文章です。
行と行の間が広くて読みやすく、
上品な印象を与えます。
</p>
line-heightの単位
| 指定方法 | 例 | 特徴 |
|---|---|---|
| 数値のみ | line-height: 1.5 | フォントサイズの1.5倍 |
| ピクセル | line-height: 24px | 固定の高さ |
| パーセント | line-height: 150% | フォントサイズの150% |
| em | line-height: 1.5em | フォントサイズの1.5倍 |
段落間の空白調整
段落（<p>）のデフォルト余白
通常、<p>タグには自動的に上下の余白が設定されています：
<p>最初の段落です。</p>
<p>2番目の段落です。自動的に間隔があきます。</p>
<p>3番目の段落です。</p>
段落間の余白をカスタマイズ
/* デフォルトの余白をリセット */
p {
margin: 0;
}
/* カスタムの余白を設定 */
.paragraph-spacing p {
margin-bottom: 1.5em;
}
.paragraph-spacing p:last-child {
margin-bottom: 0; /* 最後の段落は下余白なし */
}
見出しと段落の間隔
/* 見出しの下に余白 */
h1, h2, h3, h4, h5, h6 {
margin-bottom: 1rem;
}
/* 見出しの上にも余白（セクション分け） */
h2 {
margin-top: 2rem;
margin-bottom: 1rem;
}
h3 {
margin-top: 1.5rem;
margin-bottom: 0.8rem;
}
実用的な空白パターン
記事の読みやすい間隔設定
<style>
.article {
max-width: 700px;
margin: 0 auto;
padding: 2rem;
line-height: 1.7;
}
.article h1 {
margin-bottom: 1.5rem;
line-height: 1.3;
}
.article h2 {
margin-top: 3rem;
margin-bottom: 1rem;
}
.article h3 {
margin-top: 2rem;
margin-bottom: 0.8rem;
}
.article p {
margin-bottom: 1.5rem;
}
.article ul, .article ol {
margin-bottom: 1.5rem;
}
.article li {
margin-bottom: 0.5rem;
}
</style>
<article class="article">
<h1>記事のタイトル</h1>
<p>導入文です。読みやすい間隔で設定されています。</p>
<h2>大見出し</h2>
<p>大見出しの下の文章です。</p>
<h3>小見出し</h3>
<p>小見出しの下の文章です。</p>
</article>
カード要素の間隔
<style>
.card-container {
display: flex;
flex-direction: column;
gap: 2rem; /* カード間の間隔 */
}
.card {
background: white;
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.card h3 {
margin-top: 0;
margin-bottom: 1rem;
}
.card p:last-child {
margin-bottom: 0;
}
</style>
<div class="card-container">
<div class="card">
<h3>カード1</h3>
<p>カードの内容です。</p>
</div>
<div class="card">
<h3>カード2</h3>
<p>カードの内容です。</p>
</div>
</div>
特殊なケースでの改行・空白
改行を維持する<pre>タグ
HTMLで書いたとおりの改行と空白を維持したい場合：
<pre>
この中では
改行や 空白が
そのまま表示されます。
プログラムコードなどに使用します。
</pre>
CSSのwhite-spaceプロパティ
/* 改行と空白を維持 */
.preserve-whitespace {
white-space: pre;
}
/* 自動改行あり、空白維持 */
.preserve-spaces {
white-space: pre-wrap;
}
/* 改行のみ維持 */
.preserve-newlines {
white-space: pre-line;
}
<div class="preserve-whitespace">
この中では 空白と
改行が維持されます。
</div>
強制改行と改行禁止
/* 長い単語を強制改行 */
.break-word {
word-break: break-all;
overflow-wrap: break-word;
}
/* 改行を禁止 */
.no-wrap {
white-space: nowrap;
}
よくある問題と解決法
<br>を多用しすぎる問題
悪い例
<!-- このような書き方は避ける -->
<p>文章です。<br><br><br><br><br>大量の<br>改行があります。</p>
良い例
<!-- CSSで余白を管理 -->
<style>
.section-break {
margin-bottom: 3rem;
}
</style>
<p class="section-break">上のセクション</p>
<p>下のセクション</p>
margin の相殺（margin collapse）
<style>
.box1 {
margin-bottom: 30px;
background-color: lightblue;
}
.box2 {
margin-top: 20px;
background-color: lightgreen;
}
</style>
<div class="box1">上のボックス（下margin: 30px）</div>
<div class="box2">下のボックス（上margin: 20px）</div>
結果： 間隔は50pxではなく30px（大きい方が採用される）
解決方法
/* 一方向のmarginのみ使用 */
.consistent-spacing {
margin-bottom: 30px;
}
/* またはpadding使用 */
.padding-solution {
padding-bottom: 30px;
}
モバイルでの余白調整
.mobile-spacing {
margin-bottom: 2rem;
}
@media (max-width: 768px) {
.mobile-spacing {
margin-bottom: 1rem;
}
}
@media (max-width: 480px) {
.mobile-spacing {
margin-bottom: 0.5rem;
}
}
CSS変数を使った余白管理
統一された余白システム
:root {
--space-xs: 0.5rem; /* 8px */
--space-sm: 1rem; /* 16px */
--space-md: 1.5rem; /* 24px */
--space-lg: 2rem; /* 32px */
--space-xl: 3rem; /* 48px */
--space-xxl: 4rem; /* 64px */
}
.spacing-system {
margin-bottom: var(--space-md);
}
.large-spacing {
margin-bottom: var(--space-xl);
}
レスポンシブな余白システム
:root {
--spacing-unit: 1rem;
}
@media (max-width: 768px) {
:root {
--spacing-unit: 0.8rem;
}
}
@media (max-width: 480px) {
:root {
--spacing-unit: 0.6rem;
}
}
.responsive-margin {
margin-bottom: calc(var(--spacing-unit) * 2);
}
印刷時の空白調整
印刷用CSS
@media print {
.no-print-break {
page-break-inside: avoid;
}
.print-page-break {
page-break-before: always;
}
/* 印刷時は余白を調整 */
.print-spacing {
margin-bottom: 12pt;
}
/* 不要な空白を削除 */
.screen-only-spacer {
display: none;
}
}
まとめ
HTMLで1行空ける方法は用途に応じて使い分けることが重要です。
手法の使い分け
| 方法 | 適用場面 | メリット | 注意点 |
|---|---|---|---|
<br> | 意味のある改行 | 簡単、即効性 | 多用禁止 |
<br><br> | 簡単な空行 | 手軽 | デザイン性低 |
margin | 要素間の間隔 | 制御しやすい | CSS知識必要 |
padding | 要素内の余白 | 背景に影響 | 用途が限定的 |
height 指定 | 任意の空白 | 自由度高 | 保守性低 |
line-height | 行間調整 | 読みやすさ向上 | 文章内のみ |
ベストプラクティス
- CSSで管理：保守性と拡張性を重視
- 一貫したルール：余白システムを統一
- レスポンシブ対応：画面サイズを考慮
- セマンティック：意味のある改行のみ
<br>使用 - アクセシビリティ：読みやすさを最優先
コメント