MENU

pタグ?brタグ?HTMLの改行方法を総まとめ!

2021 2/13
pタグ?brタグ?HTMLの改行方法を総まとめ!

HTMLで改行する方法はいくつかあり、その中でも代表的なものはpタグとbrタグです。

今回はpタグとbrタグをどういう風に使い分けすればいいのかを徹底的に解説していきます!

かもめ かもめ

HTMLとCSSについて、基礎知識がある前提で解説していきます。少し不安な方は、下の記事から勉強してみてください!

あわせて読みたい
HTMLって何?基本のキから徹底解説します!
HTMLって何?基本のキから徹底解説します!Web製作をする上で避けては通れないのがHTML。今回はHTMLについて、基礎から徹底的に分かりやすく解説していきたいと思います!【HTMLとは?】HTMLとは、webページを作...
あわせて読みたい
初心者向け!CSSの書き方入門
初心者向け!CSSの書き方入門今回はCSS(スタイルシート)について解説していきます。初心者の方でも分かるよう、なるべく噛み砕いて説明していきますのでご安心ください。「CSSとは一体何なのか」...
目次

HTMLでエンターキーを押した場合

HTMLでは、Wordやメモ帳などで文章打つ時のようにエンターキーで改行しても反映されません!

<p>
  吾輩は猫である。
  名前はまだ無い。
  どこで生れたかとんと見当がつかぬ。
</p>

では実際に試してみましょう。

サンプルコードではpタグの中で改行しています。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

しかし、ブラウザを表示させてみるとこのように改行が反映されておらず、1行の文章となってしまいます。

HTMLではエンターを使って改行をしても、ブラウザ表示には反映されません!

HTMLで改行する方法

では、ここからは改行する方法を解説します。HTMLで改行する方法は3パターンあります。

使用場所によっては非推奨のものもありますが、まずは3パターン全てを学んでみましょう!

その1:pタグ

<p>吾輩は猫である。</p>
<p>名前はまだ無い。</p>
<p>どこで生れたかとんと見当がつかぬ。</p>

現段階で一番よく使われている改行方法です。

文章を改行したいときは、改行したい塊ごとでpタグ囲うと改行することができます。

なぜpタグは改行されるの?

HTMLの要素は、すべてブロック要素インライン要素どちらかの種類です。更に、ブロック要素は横幅いっぱいに伸びる性質があるため、改行されているように見えるというわけです。

ブロック要素h1h6divpなど
インライン要素aspanimgなど

つまり、pはブロック要素だから改行される(ように見える)というわけです。

その2:br

<p>
  吾輩は猫である。<br>
  名前はまだ無い。<br>
  どこで生れたかとんと見当がつかぬ。
</p>

brタグを使用する方法です。このタグを使うと、挿入した場所で強制的に改行されます。

画像を挿入するimgタグ同様、閉じタグが必要ないタグです

その3:white-space: pre;

<p>
  吾輩は猫である。
  名前はまだ無い。
  どこで生れたかとんと見当がつかぬ。
</p>
p{
  white-space: pre;
}

CSSには要素内の改行をどう扱うか指定できるwhite-spaceというプロパティがあります。

値は6種類あり、値をpreにするとHTMLに書かれた半角スペース・タブ・改行をそのまま表示することができます。

詳しくはこちら
white-space - CSS: カスケーディングスタイルシート | MDN
white-space - CSS: カスケーディングスタイルシート | MDNCSS の white-space プロパティは、要素内のホワイトスペースをどのように扱うかを設定します。

どれを使えばいいの?

基本的に、改行したい場合はpタグを使用してください!

理由はいくつかありますが、一番の理由がどのデバイスから見たとしても、文章の段組みを綺麗に保つためです。

<p>
  吾輩は猫である。<br>
  名前はまだ無い。<br>
  どこで生れたかとんと<br>
  見当がつかぬ。
</p>

例えば、先ほどご紹介したbrタグを使用したサンプルコードを見てみましょう。

分かりやすくするため、先ほどのサンプルコードに1つbrタグを追加しています

文章に合わせてbrタグを書き、強制的に改行させています。

このwebページをパソコンで表示した場合……

このように表示されます。

思った通りに表示されていますよね。

ところが、スマホで表示してみると……

  • 画面幅に応じた文字の折り返し
  • brタグでの改行

が重なり、変なところで改行されてしまいます

pタグを使用すると全てが解決するわけではありませんが、なるべくpタグを使用して意図した通りの改行となるように注意しましょう。

間違った使い方のご紹介

ここからは、注意喚起も含めて間違った使い方をご紹介したいと思います。

SEO的にも、構文的にも間違ったものですので、絶対にやらないよう注意してください。

連続使用:brタグ

<p>
これはダメな例です
<br>
<br>
<br>
brタグを使用して余白を調整するのはやめましょう
</p>

文章の間隔を取るために、brタグを連続で書くのはNGです。

brタグで調整するのではなく、CSSで調整するようにしましょう。

連続使用:pタグ

<p>
これはダメな例です
<p></p>
<p></p>
<p></p>
pタグを使用して余白を調整するのはやめましょう
</p>

このやり方をすれば見た目上は文章の余白ができます。ただし、空のpを書き続けるのは良くありません。

  • 検索エンジンからの評価が下がる
  • CSSで不具合がでる

など、デメリットのほうが大きいのでやめましょう。

改行タグまとめ

  • 基本的に改行するときはpタグを使用する
  • brタグは慎重に使う
  • white-space: pre;は基本的に使わない
  • ブロック要素(hタグ・divタグなど)でも改行される
  • brタグ、pタグの連続使用はやめましょう

この記事が気に入ったら
フォローしてね!

この記事を書いた人

都内勤務のフロントエンドエンジニア。初心者の方向けにブログを更新中。webに萌えてもっと楽しく、もっと素敵に!

目次
閉じる