Microsoft Word などの文書作成ソフトは Enter キーで任意の空白行を挿入できる。一方、Web サイトの表示に使われる HTML では「タグ」を使わなければ改行も空白行も入れられない。

WordPress のエディターは HTML の知識がなくても記事が書けるようになっており、文書作成ソフトと同じく Enter キーを押下すれば改行や段落が反映される。しかし、エディターのタイプによっては空白行が反映されず、思いどおりの装飾をしたいなら HTML・CSS に関する最低限の知識が必要だ。

行間を大きくとるため・空白行を入れるために <br> を連続して使っている方もいるが、これは HTML の文法上 NG となっているので注意してほしい。

本記事では、改行に関わってくるタグ <br> と <p> について取り上げ、正しい空白行の入れ方を解説していく。

改行と段落のタグを正しく使うべき理由

HTML タグを正しく使うべき理由は以下の 2 つだ。これは改行だけに限ったことではない。

  1. どのブラウザでも同じように表示させるため
  2. 検索エンジンにページの内容を正確に伝えるため

もう少し詳しく見てみよう。

理由（1）どのブラウザでも同じように表示させるため

HTML は、厳密にルールを守らなくても最新の Chrome や Firefox などのモダンブラウザであれば自動補正して表示してくれる。

たとえば、改行タグ <br> を以下のように連続して使用するのは非推奨だが、実際にはタグの数だけ改行して表示してくれるのだ。

この下に空白行を入れたい！<br>
<br>
<br>
<br>
↑これで反映されます。

しかし、連続する <br> を一つにまとめてしまうブラウザも存在する。そのブラウザを使っている方には、空白行ではなくただの改行として見えてしまう。

「HTML は文書の構造を定義するもの」というのが大前提となっており、HTML タグをデザインに使うべきではない。見た目を調整したいときは、HTML タグではなく CSS を使おう。正しく使いこなせば、どのブラウザでも同じように表示される。

理由（2）検索エンジンにページの内容を正確に伝えるため

検索エンジンは、HTML タグによって定義された文書構造を見ている。つまり、正しくタグを使えばきちんと構造を把握してくれるが、タグの使い方によってはページの内容を正確に認識できない。

検索エンジンは日々進歩しており、ある程度適当な HTML でも正しく分析してくれるようになってきている。人が見るのと同じ状態でページを閲覧するようにもなってきた。さらには、HTML の記述よりページの内容・品質を重視しているため、完璧な HTML にすれば検索順位が上がるというわけではない。

それでも、ページの内容を正確に伝える努力を怠るべきではなく、読者にも検索エンジンにも読みやすい記事を書くのが理想だ。

br（改行）とp（段落）の使い方

改行タグ <br> と 段落タグ <p> の具体的な違いを見ていこう。

わかりやすく、改行部分に br を入れておく。

パターン A

段落は一つの意味を持つ文章のかたまりです。br
こうして途中で改行しても、上の行と同じグループとしてみなされます。

このように段落を分けると、上の段落とは違う意味を持つかたまりとなります。わかりづらければ、「しかし」や「ところで」などが挿入されるタイミングと考えてください。

<p>段落は一つの意味を持つ文章のかたまりです。<br>
こうして途中で改行しても、同じグループとしてみなされます。</p>
<p>このように段落を分けると、上の段落とは違う意味を持つかたまりとなります。わかりづらければ、「しかし」や「ところで」などが挿入されるタイミングと考えてください。</p>

パターン B

段落は一つの意味を持つ文章のかたまりです。br
こうして途中で改行しても、上の行と同じグループとしてみなされます。 br
br
このように段落を分けると、上の段落とは違う意味を持つかたまりとなります。わかりづらければ、「しかし」や「ところで」などが挿入されるタイミングと考えてください。

<p>段落は一つの意味を持つ文章のかたまりです。<br>
こうして途中で改行しても、同じグループとしてみなされます。<br>
<br>
このように段落を分けると、上の段落とは違う意味を持つかたまりとなります。わかりづらければ、「しかし」や「ところで」などが挿入されるタイミングと考えてください。</p>

ブラウザによってはどちらのパターンも見た目は同じになるが、検索エンジンを含むコンピュータの認識が違ってくる。

どこからどこまでが一つの段落なのかを正確に伝えるために、パターン A のように <p> で正しくマークアップすべきだ。

<br> の連続使用は HTML の文法上 NG であるため、そもそもパターン B は誤りである。

行の高さや段落間の余白はCSSで設定する

段落の基本デザインは CSS で設定しよう。line-height と margin の 2 つが基本となる。

<p> に共通する指定をする場合は、以下のように記述する。数値はお好みで変更して調整してほしい。

p {
    line-height: 1.5;
    margin-bottom: 2em;
}

CSS で指定していない場合は、ブラウザのデフォルト値が反映される。

余談：<br>と<br />の違い

改行タグは <br> と <br /> の 2 つあり、解説書によって表記が異なっているかもしれない。これは HTML の仕様による違いである。

バージョンタグ
HTML4<br>
XHTML<br />
HTML5どちらでも可
HTML Living standardどちらでも可

現在は「HTML Living standard」が使われている。どちらを使ってもかまわない（反映される）が、スラッシュがない <br> で統一しておくのがよいだろう。

空白行を入れる（2行以上の間隔を空ける）方法

では、HTML で空白行を入れる方法を見ていこう。非推奨となっている方法でも反映はされるが、使わないように注意してほしい。

非推奨
brを連続で入れる

改行タグ <br> を連続させるとそのぶん改行されるが、先ほどから繰り返しているとおりこれは非推奨となっている。昔からよく見られる誤用だ。

空白行を入れたい！<br>
<br>
<br>
<br>
これで反映されます

非推奨
カラのpを連続で入れる

<br> を使わず、何も入っていないカラの <p> を連続させる方法もある。

<p>空白行を入れたい！</p>
<p></p>
<p></p>
<p></p>
<p>これで反映されます</p>

自動整形機能があるエディターでは、何も入っていないタグが自動的に除去される可能性がある。その場合は、&nbsp; （改行なしのスペース）を入れておけば除去されない。

<p>空白行を入れたい！</p>
<p> </p>
<p> </p>
<p> </p>
<p>これで反映されます</p>

WordPress のクラシックエディター（ビジュアルモード）でも、2 行以上 Enter で改行すると同様の処理が行われる。

しかし、<br> の連続使用と同じく HTML でデザインしていることになるため、厳密に言えばあまり好ましくない使い方だ。非推奨として覚えておこう。

推奨
CSSでmarginを調整する

任意の要素間の上下余白を大きくとりたい（見た目に空白行を入れたい）ときは、class をつけて margin で調整するのが最もスマートだ。

<p class="mb5">空白行を入れたい！</p>
<p>これで反映されます</p>
.mb5 {
    margin-bottom: 5em;
}

上記のコードで、段落間に5 文字分の余白が反映される。

「.mb1」「.mb2」など、余白専用の CSS をいくつか書いておくと便利だ。あらかじめ設定されているテンプレート（WordPress テーマ）もあるので、勉強も兼ねて CSS を見てみよう。

WordPressの改行・余白・空白行

現在、WordPress のエディターは 3 パターンある。

  • クラシックエディター（テキストモード）
  • クラシックエディター（ビジュアルモード）
  • ブロックエディター

ブロックエディターが標準となっているものの、まだクラシックエディターを使い続けている方も多い。それぞれ改行や段落の入れ方が異なるため、正しい操作方法を覚えておいてほしい。

クラシックエディター（テキストモード）

テキストモードの操作方法は以下のとおり。

種類操作方法
改行Enter
段落Enter 2 回（ 1 行空ける）
空白行CSS で margin を調整

1 行以上空けても空白行とはならず、ただの段落として処理される。空白行を入れたいときは CSS で調整しよう。

クラシックエディター（ビジュアルモード）

ビジュアルモードの操作方法は以下のとおり。

種類操作方法
改行Shift + Enter
段落Enter
空白行Enter 2 回以上（※カラの <p> が入る）

Microsoft Word などの操作方法に近く、Enter 連続で空白行が反映される。ただし、カラの <p> が挿入される仕様となっており、あまり好ましくない。

正しい HTML の書き方を目指すなら、テキストモードに変更して class で余白を調整するのがベストだ。

ブロックエディター

ブロックエディターの操作方法は以下のとおり。

種類操作方法
改行Shift + Enter
段落Enter（段落ブロック）
空白行スペーサーブロック（※カラの <div> が入る）

クラシックエディターとは概念が異なるが、改行・段落の操作方法はビジュアルモードと近くなっている。

Enter 連続（段落ブロック連続）では空白行とならないため、任意の余白を入れたいときは「スペーサー」ブロックを使おう。

スペーサーブロックは、カラの <div> の高さをインラインスタイルで調整する仕様となっている。

<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>

aria-hidden="true" により要素が非表示であることを伝えており、スクリーンリーダーでの読み上げがスキップされる。アクセシビリティを考えての処理だ。

スペーサーブロックを使わず、任意のブロックに class を追加して CSS で調整することもできる。

とくにこだわりがなければ、スペーサーブロックの使用で問題ない。

さいごに

改行と段落を正しく使い分けるのは、読者にも検索エンジンにも読みやすい記事にするためだ。

自分がふだん使っている環境では問題なく反映されていても、ユーザーの環境では表示が異なっているかもしれない。また、タグの誤用があれば検索エンジンの認識も変わってくるかもしれない。ぜひ正しい使い方を覚えてマスターしてほしい。

もっとも、ブログ運営で結果を出したいなら、HTML の学習はさほど優先順位が高くない。どんなに正しくマークアップしても低品質な記事を書いていては意味がないので、WordPress を使っているなら HTML はエディターに任せておいて、高品質な記事を書くことに専念したほうがよい。

高品質コンテンツとは？ブログ初心者が意識すべきポイント – Reinx
技術的な施策だけでは検索上位に入れません。大勢を意識するのではなく、検索ユーザー「ひとり」に満足してもらえるクオリティの高い記事を目指しましょう。
re-inx.com

できるだけ多くの方に記事を読んでもらうために、少しずつ知識と経験を積み重ねていこう。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座
¥2,486 （2023/03/14 15:40時点 | Amazon調べ）
Amazon
楽天市場
Yahoo! ショッピング

Reinx 記事執筆：Reinx 編集部　瀬尾 真

Web 業界歴 20 年の知見をもとに、初心者でも楽しくブログ運営に取り組んでいただけるよう、WordPress や SEO のノウハウを提供しています。ブログ診断無料サービスもご利用ください。

Twitter フォロー
Reinx 記事一覧

ブログ運営でお悩みの方へ

ブログ初心者を対象に、無料でブログ診断を行っています。

「アクセス数が伸びない」「検索にインデックスされない」「Google AdSense 審査に通らない」といったお悩みがあればぜひご利用ください。問題の原因を探り、それぞれに合わせた解決策をご提案します。

【無料】Google AdSense審査対策｜ブログ診断サービス – Reinx
ブログ初心者を対象に診断サービスを無料でご提供しています。Google AdSense審査に落ちてしまったなど、客観的なアドバイスが必要なときにご利用ください。
re-inx.com