HTMLで1行空けるには？初心者でもすぐできる改行・空白の入れ方

「ここに1行だけ空白を入れたい」
「見出しと文章の間を少しあけたい」
「WordやGoogleドキュメントみたいに、簡単に行間を空けたい」

ホームページやブログの記事を作っていて、こんなふうに思ったことはありませんか？

でもHTMLでは、文章の中でEnterキーで改行しても、ブラウザにはそのまま反映されません。

この記事では、HTMLで1行空ける（空白行を作る）ための基本的な方法から、実際の現場で使われる実践的なテクニックまで、初心者向けにやさしく解説します。これを読めば、もう「どうやって間をあけるんだっけ？」と迷わなくなりますよ。

そもそもHTMLはEnterでは改行されない

HTMLの空白処理の仕組み

テキストエディタでHTMLを書いて、以下のように改行しても：

エディタで書いたHTML

こんにちは。
これは次の行です。


ここは2行空けたつもりです。

ブラウザでの表示結果

こんにちは。これは次の行です。ここは2行空けたつもりです。

このように1行にまとめられて表示されます。

なぜこうなるの？

これはHTMLが以下の仕様を持っているからです：

• 複数の空白や改行をひとつの空白として扱う
• 見た目の調整はCSSで行うという設計思想
• 文書の構造と表現を分離するという考え方

他の文書作成ツールとの違い

ツール	改行の扱い
Microsoft Word	Enterで即座に改行
Googleドキュメント	Enterで即座に改行
HTML	専用のタグが必要

1行空けるもっとも簡単な方法：brタグ

brタグの使い方

<br> は改行を入れるタグです。

基本的な改行

こんにちは。<br>
これは次の行です。

表示結果

こんにちは。
これは次の行です。

1行分の空白を作る

1行分しっかり空けたい場合は <br> を2つ続けます：

こんにちは。<br><br>
1行空けてから次の文章です。

表示結果

こんにちは。

1行空けてから次の文章です。

複数行空ける

もっと多く空けたい場合：

文章1<br><br><br>
2行空けた文章2

brタグを使う場面

ブログ記事での段落区切り

<p>
今日は良い天気でした。<br><br>
散歩に出かけたら、美しい桜が咲いていて、<br>
春の訪れを感じることができました。
</p>

住所や連絡先の表示

<div class="contact">
〒100-0001<br>
東京都千代田区千代田1-1<br><br>
電話: 03-1234-5678<br>
FAX: 03-1234-5679
</div>

詩や歌詞の表示

<div class="poem">
桜散り<br>
風に舞い踊る<br><br>
春の終わり<br>
新緑萌える<br>
希望の季節
</div>

brタグのメリット・デメリット

メリット

• 簡単に書ける
• すぐに効果が確認できる
• HTMLだけで完結する

デメリット

• 見た目のためだけの要素
• レスポンシブデザインで崩れやすい
• メンテナンスが大変

もっとスマートに空けたい場合：CSSで余白をつける

marginを使った基本的な方法

<br> をたくさん並べるのはあまりきれいな方法ではありません。CSSで margin を使うと、よりスマートに間を空けられます。

見出しの下に余白

<h2 style="margin-bottom: 30px;">見出しです</h2>
<p>見出しの下に30ピクセル分の空白が入ります。</p>

段落の間に余白

<p style="margin-bottom: 40px;">第1段落の内容です。</p>
<p>第2段落の内容です。</p>

より実践的なCSS活用法

クラスを使った管理

<style>
.space-small {
  margin-bottom: 20px;
}

.space-medium {
  margin-bottom: 40px;
}

.space-large {
  margin-bottom: 80px;
}
</style>

<p class="space-medium">この段落の下に中程度の余白</p>
<p class="space-large">この段落の下に大きな余白</p>
<p>普通の段落</p>

用途別のクラス設定

.section-break {
  margin-bottom: 60px;
}

.paragraph-space {
  margin-bottom: 25px;
}

.heading-space {
  margin-bottom: 35px;
}

<h2 class="heading-space">第1章</h2>
<p class="paragraph-space">最初の段落です。</p>
<p class="section-break">最後の段落です。</p>

<h2 class="heading-space">第2章</h2>
<p>次の章の内容です。</p>

レスポンシブ対応の余白

.responsive-space {
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .responsive-space {
    margin-bottom: 40px;
  }
}

@media (min-width: 1024px) {
  .responsive-space {
    margin-bottom: 60px;
  }
}

空のdivで空白を作る方法

基本的な使い方

どうしても「ここに任意の高さの空白を入れたい」というときは：

<div style="height: 20px;"></div>

これで20ピクセル分の空白が入ります。

より柔軟な設定

様々な高さの空白

<!-- 小さな空白 -->
<div class="spacer-small"></div>

<!-- 中程度の空白 -->
<div class="spacer-medium"></div>

<!-- 大きな空白 -->
<div class="spacer-large"></div>

.spacer-small { height: 15px; }
.spacer-medium { height: 30px; }
.spacer-large { height: 60px; }

背景色付きの空白

<div class="colored-spacer"></div>

.colored-spacer {
  height: 40px;
  background-color: #f0f0f0;
  border-top: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
}

この方法を使う場面

セクション間の区切り

<section class="intro">
  <h2>はじめに</h2>
  <p>導入文です。</p>
</section>

<div class="spacer-large"></div>

<section class="content">
  <h2>本文</h2>
  <p>本文の内容です。</p>
</section>

画像とテキストの間

<img src="sample.jpg" alt="サンプル画像">
<div class="spacer-medium"></div>
<p>画像の説明文です。</p>

段落タグ（p）を活用した空白作成

空の段落での空白

<p>最初の段落です。</p>
<p>&nbsp;</p>
<p>空の段落で区切られた文章です。</p>

  は「ノーブレークスペース」という特殊文字で、完全に空の <p></p> だと表示されない場合があるため使用します。

この方法の注意点

SEOへの影響

• 意味のない段落はSEO的に好ましくない
• スクリーンリーダーで「空白」として読み上げられる可能性

より良い代替案

<!-- 悪い例 -->
<p>段落1</p>
<p>&nbsp;</p>
<p>段落2</p>

<!-- 良い例 -->
<p>段落1</p>
<p class="spaced">段落2</p>

.spaced {
  margin-top: 40px;
}

実用的な1行空け活用例

ブログ記事での使い分け

<article class="blog-post">
  <h1 class="title">記事タイトル</h1>
  
  <div class="meta-info">
    <time>2025年1月15日</time>
    <span>カテゴリ: Web制作</span>
  </div>
  
  <div class="spacer-medium"></div>
  
  <p class="intro">導入文です。記事の概要を説明します。</p>
  
  <div class="spacer-large"></div>
  
  <h2>見出し1</h2>
  <p class="paragraph-space">本文の内容です。</p>
  <p>続きの内容です。</p>
  
  <div class="section-break"></div>
  
  <h2>見出し2</h2>
  <p>次のセクションの内容です。</p>
</article>

.blog-post .title {
  margin-bottom: 15px;
}

.meta-info {
  color: #666;
  font-size: 0.9em;
}

.intro {
  font-size: 1.1em;
  font-weight: 500;
  color: #333;
}

.paragraph-space {
  margin-bottom: 20px;
}

.section-break {
  height: 50px;
}

ランディングページでの活用

<div class="hero-section">
  <h1>メインタイトル</h1>
  <p class="hero-text">キャッチコピー</p>
  
  <div class="spacer-large"></div>
  
  <button class="cta-button">今すぐ始める</button>
</div>

<div class="spacer-xl"></div>

<section class="features">
  <h2>特徴</h2>
  <div class="feature-list">
    <!-- 特徴の内容 -->
  </div>
</section>

商品紹介ページでの活用

<div class="product-info">
  <h1 class="product-title">商品名</h1>
  
  <div class="price-section">
    <span class="price">¥2,980</span>
    <span class="tax-note">（税込）</span>
  </div>
  
  <div class="spacer-medium"></div>
  
  <div class="product-features">
    <h3>特徴</h3>
    <ul>
      <li>高品質な素材使用</li>
      <li>軽量で持ち運び便利</li>
      <li>豊富なカラーバリエーション</li>
    </ul>
  </div>
  
  <div class="spacer-large"></div>
  
  <button class="add-to-cart">カートに追加</button>
</div>

よくある間違いと対処法

間違い1：brタグの過度な使用

問題のあるコード

<p>文章1</p>
<br><br><br><br><br>
<p>文章2</p>

正しい修正方法

<p>文章1</p>
<p class="large-space">文章2</p>

.large-space {
  margin-top: 100px;
}

間違い2：空のdivの乱用

問題のあるコード

<p>段落1</p>
<div></div>
<div></div>
<div></div>
<p>段落2</p>

正しい修正方法

<p>段落1</p>
<p class="spaced">段落2</p>

.spaced {
  margin-top: 60px;
}

間違い3：インライン要素での余白

問題のあるコード

<span style="margin-bottom: 20px;">テキスト1</span>
<span>テキスト2</span>

インライン要素（span、a、emなど）では上下のmarginが効きません。

正しい修正方法

<div style="margin-bottom: 20px;">テキスト1</div>
<div>テキスト2</div>

または

<span style="display: block; margin-bottom: 20px;">テキスト1</span>
<span style="display: block;">テキスト2</span>

トラブルシューティング

よくある問題と解決法

marginが効かない場合

原因1: インライン要素に指定している

/* 解決法 */
.space-element {
  display: block;
  margin-bottom: 20px;
}

原因2: マージンの相殺が発生

/* 解決法 */
.avoid-collapse {
  padding-bottom: 1px;
  margin-bottom: 19px; /* 合計20px */
}

レスポンシブで空白が大きすぎる

問題: パソコンの設定がスマホでも適用される

解決法:

.responsive-space {
  margin-bottom: 15px; /* スマホ用 */
}

@media (min-width: 768px) {
  .responsive-space {
    margin-bottom: 40px; /* パソコン用 */
  }
}

意図しない余白が入る

原因: ブラウザのデフォルトスタイル

解決法:

/* リセットCSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

p {
  margin-bottom: 1em; /* 必要な分だけ指定 */
}

現代的なCSS手法

CSS Gridを使った空白制御

<div class="grid-layout">
  <div class="content">コンテンツ1</div>
  <div class="spacer"></div>
  <div class="content">コンテンツ2</div>
</div>

.grid-layout {
  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: 40px;
}

CSS Custom Properties（CSS変数）

:root {
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;
  --space-xl: 128px;
}

.space-small { margin-bottom: var(--space-sm); }
.space-medium { margin-bottom: var(--space-md); }
.space-large { margin-bottom: var(--space-lg); }

まとめ：HTMLで1行空けるベストプラクティス

推奨される方法

1. CSSのmarginを使う – 最も推奨される方法
2. 意味のあるHTML構造を保つ – SEOとアクセシビリティに配慮
3. レスポンシブ対応を考慮 – デバイスごとに最適化
4. CSS変数で統一管理 – メンテナンスしやすいコード

使い分けの指針

場面	推奨方法	理由
段落間の余白	margin	意味的に正しい
緊急時の調整	br×2	簡単だが多用は禁物
デザイン調整	空のdiv	最後の手段として

避けるべき方法

• brタグの連続使用（5個以上）
• 意味のない空のp要素
• インライン要素でのmargin指定
• 固定値のみでの余白指定