【CSS】brではダメ！適切な空白行の作り方

みなさん、これやっちゃってませんか？

『brタグを2つ以上続けて文章内に空白を作る』

でもこれ実は、HTMLのタグの使い方としては間違っていて、Googleの評価を落とすことになります。
今回はCSSを使った空白行の作り方について解説していきます。

空白行とは

空白行とは上の図のように文章の中にある空の行のことです。

空白行の適切な作り方

空白行を作る方法は主に2つです。

1つずつ解説していきますね。

marginをつける

See the Pen Untitled by masata (@masata_lm) on CodePen.

こんな感じで各行をpタグで囲んでからmarginをつけて空白行を作ります。割と単純に思うかもしれませんが、これで実装しましょう。

行ごとにpタグで囲むのが面倒でもこのように行なうことを推奨します。

line-heightをつくります

See the Pen Untitled by masata (@masata_lm) on CodePen.

line-heightで作ることも可能です。

brで作るのがダメな理由

See the Pen Untitled by masata (@masata_lm) on CodePen.

<p>
    これは1行目です
    <br>
    <br>
    これは2行目です
</p>

正直、これでも実装できてしまうんですよね。。

では、なぜbrで作るのがダメなのかを説明します。

そもそもbrは改行させるためのものだから

brタグは本来、空白行を作るためのタグではなく、改行を作るためのタグです。

基本的にはタグは各役割があり、適切に使うことがGoogleの評価につながっていくので、SEOの観点からもbrタグを空白行で使用するのは避けましょう。