「HTMLで空白行を入れたい」と思うことはありませんか？
テキストエディタ上で改行をしても、空白行は作成できません。
またSEOの評価が下がる空白行の作り方をしている場合もあります。brタグを用いて空白行を作成するのは誤った実装方法です。
この記事ではCSSで空白行を作成する正しい方法について解説します。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
空白行とは？
まず空白行がどのようなものを指すか、確認していきましょう。
上のようにテキスト間に空の行を設けることを空白行と呼びます。
テキストエディタでHTMLに空の行を入れても、空白行は作成できません。
<p>
空白行を開ける場合は
<!--テキストエディタでスペースを入れてみる -->
正しい方法を使用するのが
</p>
<p>とても大切です</p>
上のようにHTMLへ空白行を入力しても、半角スペースが1文字分できるのみです。
空白行を挿入するためには、CSSを用いる必要があります。
CSSで空白行を作る２つの方法
CSSで空白行を作る方法は２つあります。
- line-heightプロパティ
- marginプロパティ
それぞれ異なる特徴をもつので解説していきます。
1.line-heightプロパティで空白行を作成
line-heightを用いて行の高さを広くとるように指定すると、空白行が作成できます。
例えばline-height: 3;にすると、行の高さをフォントの高さの3倍に指定できます
p{
line-height: 3;
}
line-heightはp要素間だけでなく、p要素内でも指定が可能です。
以下の2種類のコードをブラウザで比較してみましょう
<!-- ①ニ行を別のp要素として記述 -->
<p>空白行を開ける場合は</p>
<p>正しい方法を使用するのがとても大切です。</p>
<!-- ②ニ行をひとつのp要素内に記述 -->
<p>
空白行を開ける場合は<br>
正しい方法を使用するのがとても大切です。
</p>
上のように要素の内側、外側いずれにも空白行を作成できました。
line-heightのメリットとしてテキスト間の上下に余白をキレイに作成可能です。
しかしline-heightを使用するデメリットは、テキストの上下均等に空白にできてしまうことです。
line-heightでは「下方向だけに空白行を作りたい」といった、上下個別の指定はできません。
line-heightで空白行を作成する方法まとめ
メリット：要素の外側、内側問わずに指定可能
デメリット：上下個別に指定できない
2.marginを使って空白行を作成
marginを使って空白行を作成する方法を解説します。
要素の外側にmarginで余白を設け、空白行を作成可能です。
<p>空白行を開ける場合は</p>
<p>正しい方法を使用するのがとても大切です。</p>p{
margin-bottom: 30px;
}
margin-bottomを指定して、p要素の下方に空白行を作成できました。
margin-top指定でp要素の上方への作成も可能です。
p{
margin-top: 30px;
}
marginのメリットは上下個別に空白行を作成できることです。
ただし、デメリットとして要素の内側に空白行を作成できません。
<p>
空白行を開ける場合は<br>
正しい方法を使用するのがとても大切です。
</p>p{
margin-bottom: 30px;
}
marginはline-heightのように、p要素の内側に空白行を作成できません。
marginで空白行を作成する方法まとめ
メリット：上下個別に指定できる
デメリット：要素の外側しか指定できない
brタグで空白行を作るのがNGな理由
brタグを連続して記述し、空白行を作成する方法はNGです。
<p>
brタグで改行は可能ですが
<br>
<br>
<br>
NGな方法です。
</p> 
このようにbrタグを使う方法は簡単なので、使いやすいように思うかもしれません。
しかしbrタグを連続して使用すると、Googleの評価を下げてしまう恐れがあります。
理由は以下の2点です
- 文章構造が適切に伝わらないため
- デザイン内容はCSSで作成することが推奨されているため
それぞれ解説していきます。
1.文書構造が適切に伝わらないため
brタグを連続で使用するとHTMLの文書構造が適切に伝わりません。
brタグはテキストの改行位置を意味し、連続での使用は本来の用途を逸脱しています。
そのためGoogleから誤った文書構造のコンテンツと評価を受けるのです。
2 .デザイン内容はCSSで作成することが推奨されているため
デザインの内容はCSSで作成することが、推奨されています。
例えばデザインとして背景に三角形を設置する場合を考えてみましょう。
この場合、三角形の画像を用いるのではなく、CSSで三角形を作成するのが望ましいです。
同様に空白行はWebサイトにおいて文書の一部ではなく、デザインと考えます。
よってCSSを用いて空白行を実装しなければ、SEOの評価を下げてしまうのです。
まとめ
この記事では空白行を正しく作る方法を解説しました。
brタグを使用する方法は、検索エンジンからの評価が下がる恐れがあるので使用は控えましょう。
CSSで空白行を作る正しい方法にはline-heightとmargin、2つの方法があります。
それぞれの方法のメリット・デメリットについて、再度確認しましょう。
| CSSプロパティ | メリット | デメリット |
| line-height | 要素の内側、外側いずれにも指定できる | 上下個別に指定できない |
| margin | 上下個別に指定できる | 要素の外側にしか指定できない |
要素内に空白行を作成するならline-height一択ですが、要素間ならばいずれの方法も使用できます。
要素の上下のどちらかにだけ空白行を作成したいなら、marginを使用すると良いです。
それぞれのプロパティの特徴を理解して、チャレンジしてみましょう。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
