HTMLで空白行や高さを調整する方法｜見た目を整えるシンプルテクニック

html

「ここにちょっとだけ空白を入れたい」
「見出しと本文の間をあけたい」
「WordやGoogleドキュメントみたいに、簡単に行間を調整したい」

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

HTMLでは単純にEnterキーで改行や空行を入れても、ブラウザには反映されません。これはHTMLの仕様で、複数の空白や改行はまとめてひとつの空白に扱われるからです。

そこでこの記事では、HTMLで空白行や高さを調整するための方法を初心者向けにやさしく紹介します。これを読めば、行間や間隔を自由にコントロールできるようになりますよ。

スポンサーリンク

HTMLの空白処理について理解しよう

なぜ改行が反映されないの？

HTMLでは、以下のような書き方をしても：

エディタで書いたHTML

<p>最初の段落です。</p>



<p>間を空けたつもりの段落です。</p>

ブラウザでの表示結果

最初の段落です。

間を空けたつもりの段落です。

このように、空行が無視されて表示されます。

HTMLの設計思想

これは、HTMLが「文書の構造」と「見た目」を分離するという設計思想を持っているからです：

  • HTML: 文書の構造や意味を表現
  • CSS: 見た目やレイアウトを制御

そのため、空白や改行による見た目の調整は、CSSで行うのが正しいアプローチとされています。

空白行を作る基本的な方法

brタグで簡単に空行を入れる

基本的な使い方

同じ段落内で少し間をあけたいときは <br>（ビーアール）を複数使う方法があります：

<p>こんにちは！<br><br>少し間をあけて次の文章です。</p>

これで、2つの <br> の分だけ行があきます。

様々な間隔の作り方

<!-- 1行分の空白 -->
<p>文章1<br><br>文章2</p>

<!-- 2行分の空白 -->
<p>文章1<br><br><br>文章2</p>

<!-- 3行分の空白 -->
<p>文章1<br><br><br><br>文章2</p>

brタグを使う場面

<!-- 住所の表記 -->
<address>
〒100-0001<br>
東京都千代田区千代田1-1<br><br>
電話: 03-1234-5678
</address>

<!-- 詩や歌詞 -->
<div class="poem">
桜散り<br>
風に舞い踊る<br><br>
春の終わり
</div>

<!-- 挨拶文での改行 -->
<p>
いつもお世話になっております。<br><br>
この度は貴重なお時間をいただき、<br>
ありがとうございます。
</p>

brタグの制限と注意点

高さの調整ができない

<br> はあくまで「改行」であって、高さを自由に調整するのには向いていません。

<!-- 問題のある例：高さが固定される -->
<p>見出し<br><br><br><br><br>本文</p>

この方法では、デバイスやフォントサイズによって空白の見た目が変わってしまいます。

メンテナンスが困難

<!-- 後から変更が大変 -->
<p>段落1<br><br><br><br><br><br>段落2</p>

このように <br> を多用すると、後からデザインを変更するときに非常に手間がかかります。

高さをもっと自由に調整する方法

空のdivに高さを指定

基本的な使い方

空白スペースを作りたい場所に <div>（ディブ）を置き、height をCSSで指定する方法です：

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

これで30ピクセル分の空白ができます。

様々な高さの設定

<!-- 小さな空白 -->
<div style="height: 15px;"></div>

<!-- 中程度の空白 -->
<div style="height: 40px;"></div>

<!-- 大きな空白 -->
<div style="height: 80px;"></div>

<!-- とても大きな空白 -->
<div style="height: 150px;"></div>

クラスを使った管理

<style>
.spacer-xs { height: 10px; }
.spacer-sm { height: 20px; }
.spacer-md { height: 40px; }
.spacer-lg { height: 80px; }
.spacer-xl { height: 120px; }
</style>

<p>最初の段落</p>
<div class="spacer-md"></div>
<p>空白を挟んだ段落</p>

この方法のメリット

  • 正確な高さ制御: ピクセル単位で調整可能
  • レスポンシブ対応: メディアクエリで高さを変更可能
  • 再利用性: クラスを使って統一的な管理

実用的な使用例

セクション間の区切り

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

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

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

画像とテキストの間

<img src="hero-image.jpg" alt="メイン画像">
<div class="spacer-md"></div>
<h1>タイトル</h1>
<div class="spacer-sm"></div>
<p>説明文です。</p>

marginとpaddingで要素同士の間隔をあける

marginを使った空白作成

基本的な使い方

空白を作るために最もよく使われるのがCSSの margin（外側の余白）です：

<h2 style="margin-bottom: 40px;">見出し</h2>
<p>本文がここに入ります。</p>

これで見出しの下に40ピクセル分の空白を作れます。

上下左右の指定

<!-- 下に余白 -->
<p style="margin-bottom: 30px;">段落1</p>

<!-- 上に余白 -->
<p style="margin-top: 25px;">段落2</p>

<!-- 上下に余白 -->
<p style="margin: 20px 0;">段落3</p>

<!-- 四方向すべてに余白 -->
<p style="margin: 15px;">段落4</p>

marginの詳しい指定方法

一括指定

/* 上下左右すべて同じ */
margin: 20px;

/* 上下20px、左右10px */
margin: 20px 10px;

/* 上20px、左右10px、下30px */
margin: 20px 10px 30px;

/* 上20px、右15px、下30px、左5px */
margin: 20px 15px 30px 5px;

個別指定

margin-top: 20px;     /* 上のマージン */
margin-right: 15px;   /* 右のマージン */
margin-bottom: 30px;  /* 下のマージン */
margin-left: 10px;    /* 左のマージン */

paddingとの違い

marginとpaddingの違い

<style>
.margin-example {
  margin: 20px;           /* 外側の余白 */
  background-color: #f0f0f0;
}

.padding-example {
  padding: 20px;          /* 内側の余白 */
  background-color: #e0e0e0;
}
</style>

<div class="margin-example">margin（外側余白）</div>
<div class="padding-example">padding（内側余白）</div>

使い分けの指針

  • margin: 要素と要素の間の空白
  • padding: 要素の境界線から中身までの空白

実用的なmargin活用例

ブログ記事での段落間調整

<style>
.blog-post h2 {
  margin-top: 60px;
  margin-bottom: 30px;
}

.blog-post p {
  margin-bottom: 20px;
}

.blog-post .intro {
  margin-bottom: 40px;
  font-size: 1.1em;
}
</style>

<article class="blog-post">
  <h1>記事タイトル</h1>
  <p class="intro">導入文です。</p>
  
  <h2>見出し1</h2>
  <p>本文の段落です。</p>
  <p>続きの段落です。</p>
  
  <h2>見出し2</h2>
  <p>次のセクションの内容です。</p>
</article>

カード型レイアウトでの間隔調整

<style>
.card {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.card h3 {
  margin-top: 0;
  margin-bottom: 15px;
}

.card p {
  margin-bottom: 10px;
}

.card:last-child {
  margin-bottom: 0;  /* 最後のカードは下マージンなし */
}
</style>

<div class="card">
  <h3>カード1</h3>
  <p>カードの内容です。</p>
</div>

<div class="card">
  <h3>カード2</h3>
  <p>カードの内容です。</p>
</div>

レスポンシブ対応の高さ調整

メディアクエリを使った調整

デバイス別の空白調整

.responsive-spacer {
  height: 20px;  /* スマホ用 */
}

@media (min-width: 768px) {
  .responsive-spacer {
    height: 40px;  /* タブレット用 */
  }
}

@media (min-width: 1024px) {
  .responsive-spacer {
    height: 60px;  /* パソコン用 */
  }
}

ビューポート単位を使った調整

.viewport-spacer {
  height: 5vh;   /* ビューポート高さの5% */
}

.responsive-margin {
  margin-bottom: 3vw;  /* ビューポート幅の3% */
}

実用的なレスポンシブ例

<style>
.section-spacer {
  height: 30px;
}

@media (min-width: 768px) {
  .section-spacer {
    height: 60px;
  }
}

@media (min-width: 1200px) {
  .section-spacer {
    height: 100px;
  }
}

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

@media (min-width: 768px) {
  .responsive-text {
    margin-bottom: 30px;
  }
}
</style>

<section>
  <h2>セクション1</h2>
  <p class="responsive-text">内容1</p>
</section>

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

<section>
  <h2>セクション2</h2>
  <p class="responsive-text">内容2</p>
</section>

空白行や高さ調整の注意点とベストプラクティス

brタグの多用は避けよう

問題のある例

<!-- 悪い例：メンテナンスが困難 -->
<p>段落1</p>
<br><br><br><br><br><br><br>
<p>段落2</p>

改善例

<!-- 良い例：CSSで管理 -->
<p>段落1</p>
<p class="large-top-margin">段落2</p>

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

CSSで管理すると後々ラク

統一的な管理

/* スペーシングシステム */
.space-xs { margin-bottom: 8px; }
.space-sm { margin-bottom: 16px; }
.space-md { margin-bottom: 24px; }
.space-lg { margin-bottom: 32px; }
.space-xl { margin-bottom: 48px; }

/* 特定用途のスペース */
.section-break { margin-bottom: 80px; }
.paragraph-space { margin-bottom: 20px; }
.heading-space { margin-bottom: 30px; }

使用例

<h1 class="heading-space">タイトル</h1>
<p class="paragraph-space">最初の段落</p>
<p class="section-break">最後の段落</p>

<h2 class="heading-space">次のセクション</h2>
<p>次の内容</p>

marginの相殺に注意

margin collapseの問題

<style>
.box1 { margin-bottom: 30px; }
.box2 { margin-top: 20px; }
</style>

<div class="box1">ボックス1</div>
<div class="box2">ボックス2</div>

この場合、2つのmarginは合計50pxではなく、大きい方の30pxが適用されます。

解決方法

/* 解決法1: paddingを併用 */
.avoid-collapse {
  padding-top: 1px;
  margin-top: 29px;  /* 合計30px */
}

/* 解決法2: flexboxやgridを使用 */
.flex-container {
  display: flex;
  flex-direction: column;
  gap: 30px;  /* 確実に30pxの間隔 */
}

現代的なCSS手法

CSS Gridでの空白制御

<style>
.grid-layout {
  display: grid;
  grid-template-rows: auto 60px auto 40px auto;
  grid-template-areas: 
    "content1"
    "space1"
    "content2"
    "space2"
    "content3";
}

.content1 { grid-area: content1; }
.content2 { grid-area: content2; }
.content3 { grid-area: content3; }
.space1 { grid-area: space1; }
.space2 { grid-area: space2; }
</style>

<div class="grid-layout">
  <div class="content1">コンテンツ1</div>
  <div class="space1"></div>
  <div class="content2">コンテンツ2</div>
  <div class="space2"></div>
  <div class="content3">コンテンツ3</div>
</div>

Flexboxでの空白制御

<style>
.flex-container {
  display: flex;
  flex-direction: column;
  gap: 30px;  /* 各要素間に30pxの間隔 */
}

.flex-spacer {
  flex: 0 0 50px;  /* 50px固定の空白 */
}
</style>

<div class="flex-container">
  <div>アイテム1</div>
  <div>アイテム2</div>
  <div class="flex-spacer"></div>
  <div>アイテム3</div>
</div>

CSS Custom Properties（CSS変数）

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

.spacing-system {
  margin-bottom: var(--space-md);
}

.large-spacing {
  margin-bottom: var(--space-xl);
}

/* レスポンシブな変数 */
@media (min-width: 768px) {
  :root {
    --space-md: 32px;
    --space-lg: 48px;
    --space-xl: 64px;
  }
}

実際のWebサイトでの活用例

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

<style>
.hero-section {
  padding: 100px 0;
}

.hero-title {
  margin-bottom: 30px;
}

.hero-subtitle {
  margin-bottom: 50px;
}

.section-gap {
  height: 80px;
}

@media (max-width: 767px) {
  .hero-section {
    padding: 60px 0;
  }
  
  .section-gap {
    height: 40px;
  }
}
</style>

<section class="hero-section">
  <h1 class="hero-title">メインタイトル</h1>
  <p class="hero-subtitle">サブタイトル</p>
  <button>アクションボタン</button>
</section>

<div class="section-gap"></div>

<section>
  <h2>次のセクション</h2>
  <p>内容...</p>
</section>

ブログ記事での読みやすさ改善

<style>
.blog-article {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.7;
}

.blog-article h1 {
  margin-bottom: 30px;
}

.blog-article h2 {
  margin-top: 60px;
  margin-bottom: 25px;
}

.blog-article h3 {
  margin-top: 40px;
  margin-bottom: 20px;
}

.blog-article p {
  margin-bottom: 20px;
}

.blog-article .intro {
  margin-bottom: 50px;
  font-size: 1.1em;
  color: #666;
}

.blog-article .section-divider {
  height: 60px;
  border-top: 1px solid #eee;
  margin: 80px 0;
}
</style>

<article class="blog-article">
  <h1>記事タイトル</h1>
  
  <p class="intro">この記事では...</p>
  
  <h2>見出し1</h2>
  <p>本文...</p>
  
  <h3>小見出し</h3>
  <p>詳細...</p>
  
  <div class="section-divider"></div>
  
  <h2>見出し2</h2>
  <p>続きの内容...</p>
</article>

ECサイトでの商品表示

<style>
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-bottom: 60px;
}

.product-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.product-image {
  margin-bottom: 15px;
}

.product-title {
  margin-bottom: 10px;
  font-size: 1.1em;
  font-weight: bold;
}

.product-price {
  margin-bottom: 15px;
  color: #e74c3c;
  font-size: 1.2em;
}

.product-button {
  margin-top: 20px;
}
</style>

<div class="product-grid">
  <div class="product-card">
    <img src="product1.jpg" alt="商品1" class="product-image">
    <h3 class="product-title">商品名1</h3>
    <p class="product-price">¥2,980</p>
    <button class="product-button">カートに追加</button>
  </div>
  
  <div class="product-card">
    <img src="product2.jpg" alt="商品2" class="product-image">
    <h3 class="product-title">商品名2</h3>
    <p class="product-price">¥3,480</p>
    <button class="product-button">カートに追加</button>
  </div>
</div>

トラブルシューティング

よくある問題と解決法

marginが効かない場合

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

<!-- 問題 -->
<span style="margin-bottom: 20px;">テキスト</span>

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

原因2: margin collapseが発生している

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

高さが思った通りにならない

原因: ボックスモデルの理解不足

/* 解決法：box-sizingを使用 */
* {
  box-sizing: border-box;
}

.spacer {
  height: 50px;
  padding: 0;
  margin: 0;
}

レスポンシブで空白が崩れる

/* 解決法：相対単位を使用 */
.responsive-spacer {
  height: 5vw;
  min-height: 20px;
  max-height: 80px;
}

まとめ

HTMLで空白行や高さを調整するためのベストプラクティスをまとめます：

基本的な方法

  • 軽い改行には <br> タグ
  • 任意の高さには <div style="height: 30px;">
  • 要素間の余白には margin プロパティ

推奨されるアプローチ

  • CSSでの統一的な管理
  • レスポンシブ対応の考慮
  • 現代的なCSS手法（Grid、Flexbox）の活用

避けるべき方法

  • <br> タグの大量使用
  • インライン要素でのmargin指定
  • 固定値のみでの高さ設定

重要なポイント

  • margin collapseの理解
  • ボックスモデルの適切な活用
  • デザインシステムによる統一管理

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました