記事内にはプロモーションが含まれています

【HTML】1行空ける方法は？brタグとCSSの正しい使い分けと行間調整テクニック

【HTML】1行空ける方法は？brタグとCSSの正しい使い分けと行間調整テクニック HTML

Webページを作成していると、「段落と段落の間にもう少し隙間が欲しい」「見出しの上に1行分の空白を作りたい」と思う場面は頻繁に訪れます。

もっとも手軽な方法は <br> タグを連続して書くことですが、実はこの方法はWeb制作の現場ではあまり推奨されていません。

見た目を整えるためだけのタグの乱用は、Googleなどの検索エンジンや、音声読み上げソフトを利用するユーザーにとってマイナスになる可能性があるからです。

この記事では、HTMLで「1行空ける（余白を作る）」ための正しい方法を3つ紹介します。
CSSを使った推奨される方法から、あえて <br> を使うべき場面まで、状況に応じたベストプラクティスを解説します。

【本記事の信頼性】
プロフィール
執筆者：マヒロ
  • 執筆者は元エンジニア
  • SES⇒大手の社内SE⇒独立
  • 現在はこじんまりとしたプログラミングスクールを運営
  • モットーは「利他の精神」

HTMLで「1行空ける」ための3つのアプローチ

「1行空けたい」という目的は同じでも、その背景にある意図によって最適な実装方法は異なります。
大きく分けて以下の3つのパターンがあります。

  • 要素と要素の間を広げたい：CSSの margin（マージン）を使う【推奨】
  • 文章の行間を全体的に広げたい：CSSの line-height（ラインハイト）を使う
  • 文章の中で改行として空けたい：HTMLの <br> タグを使う

それぞれの具体的な書き方を見ていきましょう。

CSSのmargin（余白）で間隔を空ける【推奨】

見出しや段落、画像などの「要素同士の間隔」を空けたい場合、最も推奨されるのがCSSの margin プロパティを使う方法です。

HTMLの構造を汚すことなく、見た目の余白だけを自由にコントロールできます。

「1行分」だけでなく、「30px」「5%」など微調整も可能です。

下の余白を広げる場合（margin-bottom）

特定の要素の下側に余白を作りたいときは margin-bottom を指定します。

<!-- HTML -->
<p class="mb-text">この段落の下に1行分程度の余白を空けます。</p>
<p>次の段落です。</p>

<!-- CSS -->
<style>
.mb-text {
    margin-bottom: 1.5em; /* 1.5文字分（およそ1行分）の余白 */
}
</style>
  • margin-bottom: 1.5em;：要素の「下側」に余白を作ります。
  • 1.5em：単位の「em（エム）」は、現在の文字サイズを1とする単位です。1.5em は「文字サイズの1.5倍の高さ」となります。
    • 行間（line-height）の設定にもよりますが、おおよそ1行分の余白としてよく使われます。
    • レスポンシブデザインでは、ルート（htmlタグ）の文字サイズを基準にする rem という単位も計算がしやすく推奨されます。

上の余白を広げる場合（margin-top）

逆に見出しの上などを空けたい場合は margin-top を使います。

<style>
h2 {
    margin-top: 2em; /* 2文字分の高さの余白を上に作る */
}
</style>

<h2>新しいセクションの見出し</h2>
  • margin-top：要素の「上側」に余白を作ります。
  • セクションの変わり目など、大きく間隔を取りたい場合によく使われます。
⚠️ 注意：マージンの相殺について
CSSには「マージンの相殺（margin collapsing）」という仕様があります。
例えば、上の要素に margin-bottom: 20px;、下の要素に margin-top: 30px; を指定した場合、間の余白は合計の50pxにはならず、大きい方の30pxになります。
意図した余白にならない場合は、この仕様を思い出してください。
💡 補足：paddingとの違い
margin は要素の「外側」の余白ですが、padding は要素の「内側」の余白です。
背景色がついている要素で余白を空ける場合などは、用途に応じて使い分ける必要があります。

2. line-heightで行間そのものを広げる

「空白行を入れる」のではなく、「文章が詰まっていて読みづらいので、行と行の間を広げたい」という場合は、CSSの line-height プロパティを使用します。

これは1行の高さを設定するもので、結果として行間が広がります。

<style>
.wide-leading {
    line-height: 2.0; /* 行の高さを文字の2倍にする */
}
</style>

<p class="wide-leading">
    長い文章の場合、行間が詰まっていると読みづらくなります。<br>
    line-heightを指定することで、<br>
    ゆったりとした読みやすいレイアウトになります。
</p>
  • line-height: 2.0;：行の高さをフォントサイズの2倍に設定します。
  • 例えばフォントサイズが16pxの場合、1行の高さは32pxになり、文字以外の残りの部分が上下の余白（行間）として表示されます。
  • 実務では読みやすさを考慮し、1.5〜1.8程度を指定するのが一般的です。
  • 単位を付けずに数値のみで指定するのが推奨されます（文字サイズが変わっても比率が保たれるため）。

3. brタグで改行して1行空ける【文章内向け】

<br> タグは「改行（Break）」を意味するタグです。

基本的には「住所の区切り」や「詩」など、文章の意味として改行が必要な場所でのみ使用します。
しかし、ブログ記事の執筆などでは、視覚的なリズムを作るために空行を入れる目的で使われることもあります。

brタグの適切な使用例（住所など）

HTMLの文法上、正しい <br> の使い方は以下のようになります。

<address>
    〒100-0001<br>
    東京都千代田区千代田1-1<br>
    皇居
</address>

brタグを連続で使用する方法（非推奨だが一般的）

<br> を2回続けることで、1行分の空白行を作ることができます。

<p>
    ここで文章を一度区切ります。<br>
    <br>
    1行空いて、続きの文章が始まります。
</p>

コード解説

  • 1つ目の <br> で次の行へ移動し、2つ目の <br> でさらに次の行へ移動するため、結果として間に1行分の空白が生まれます。
  • 手軽ですが、多用しすぎるとHTMLの構造としては好ましくありません（後述）。

やってはいけない？非推奨な空白行の作り方

見た目上は1行空いているように見えても、HTMLの文法やSEO、アクセシビリティの観点から推奨されない方法がいくつかあります。

これらは昔のWeb制作では使われていましたが、現在は避けるべきテクニックです。

NG例1：レイアウト目的でのbrタグ連打

× 非推奨： <br><br><br><br>

「もっと広く空けたいから」といって、<br> を何個も並べるのは避けましょう。

一部のスクリーンリーダーや設定によっては「改行、改行…」と読み上げられたり、何もない空間として認識されユーザーを混乱させる可能性があります。

広い余白が必要な場合は、必ずCSSの margin を使いましょう。

NG例2：空のpタグやdivタグ

× 非推奨： <p> </p>

中身のない（またはスペースだけの）<p> タグを置いて余白を作る方法も非推奨です。

HTMLにおいて連続する空白文字は基本的に1つにまとめられるか無視されるため、意図した表示にならないことがあります。

また、HTMLはあくまで「文書構造」を表すものであり、余白という「見た目」のために空の要素を置くのは正しい使い方ではありません。

HTML/CSSのスキルを活かして年収を上げる方法

以上、HTMLやCSSで適切に改行する方法やNG例について解説してきました。

なお、HTMLやCSSのスキルがある場合には、「副業で稼いで年収を上げる」といったことが可能です。

HTML/CSSのスキルを持つ人は多いものの、その分案件数も多く、副業エージェントやフリーランスエージェントを利用することで予想外の高単価案件が見つかることもあります。

エージェントサービスは、登録も利用もすべて完全無料なので、どんな求人や案件があるのか気になる方は、気軽に利用してみるとよいでしょう。

スポンサーリンク