HTMLのbrタグとpタグとpreタグで改行する方法

よくコードに関するお問い合わせを頂くので、webエンジニアに人気のslackでゆるコミュを作りました。
コードに関する質問はゆるコミュでお願いします。ゆるコミュの参加・質問は無料です。

HTML / css / laravel / Django / wordpress / shopify / php / python / javascript / jQuery / React / AWS など初心者から中級者の質問を中心にお答え致します。

メンターとしての参加も大歓迎です。

この記事ではHTMLで改行をする方法をご紹介します。
HTMLで改行する方法は次の3つがあります。

  • brタグを使う方法
  • pタグを使う方法
  • preタグを使う方法

どれも同じように改行をできますが、それぞれのタグが持つ意味が違うので用途に応じて使い分ける必要があります。

brタグで改行

brタグで
改行する

pタグで改行

pタグで

改行する

preタグで改行

preタグで
改行する

それぞれのタグが持つ意味に応じて使い分ける方法や改行するサンプルコードをご紹介します。

目次

brタグとpタグとpreタグの使い分け

brタグとpタグとpreタグはそれぞれが持つ意味が異なります。
これらのタグを使い分けれるようにタグが持つ意味を理解しましょう。

brタグは「break」の略で、改行で使用します。
段落内でテキストを次の行に移すために使用します。

pタグは「paragraph」の略で「段落」を意味します。
そのため、pタグは段落を分けるために使用すめ文章は改行されます。

preタグは「Preformatted Text」の略で「整形済みテキスト」を意味します。
プログラミングのサンプルコードやアスキーアートのように改行やスペースなどをそのまま表示したいときに使用します。

改行するために使うタグは多くの場合brタグかpタグになります。
段落内で改行するときはbrタグ、段落を伴う改行の場合はpタグと使い分けましょう。

HTMLで改行する方法

HTMLで改行する方法は次の通り3通りあります。

  • brタグを使って段落内で改行する
  • pタグを使って段落分けして改行する
  • preタグを使って改行をそのまま表示する

改行する目的に合わせて適切な改行方法を選択しましょう。
それぞれの使い方をご紹介します。

brタグを使って段落内で改行する

brタグで改行する場合は次のコードのように改行したい部分に<br>を挿入します。

brタグで<br>改行する
brタグで
改行する

brタグは段落内での改行のため、多くの場合次のコードのようにpタグで囲まれた中で使います。

<p>
...
brタグで<br>改行する
...
</p>

また、brタグでも<br />を見ることがありますが、これはXHTML文法です。
<br><br />のどちらでも改行はされますが、HTML5では<br>が推奨されているので<br>を使うようにしましょう。

pタグを使って段落分けして改行する

1つ1つの段落を<p>~</p>で囲みます。次のコードのようにpタグで囲まれた段落ごとに改行されます。

<p>pタグで</p><p>改行する</p>

pタグで

改行する

pタグはHTMLのブロック要素なので、上記のコードのように一行にpタグを複数書いても改行されます。

ブロック要素(Block-Level Elements)とは、冒頭でも説明した通り「行全体のまとまり」です。開始タグと終了タグで囲った箇所は行全体が1つのブロックとして扱われるため、範囲が横いっぱいに広がります。

【HTML】3分でわかる!インライン要素とブロック要素の違い

preタグを使って改行をそのまま表示する

<pre>~</pre>で囲んだ文章の改行や半角スペースは次のようにそのままブラウザに表示されます。

<pre>
preタグで
改行する
</pre>
preタグで
改行する

そのため、preタグ内ではbrタグで改行する必要はありません。

段落と行間のレイアウトを整える

<br>を複数入れることで次のように行間にスペースを入れることはできますが、<br>を連続で使用することは推奨されていません。

brタグで<br><br>改行する
brタグで

改行する

<br><p></p>を使わずに段落や行間にスペースを入れる方法や幅を調整する方法などをご紹介します。

marginで段落の余白を調整する

段落ごとにスペースを入れたい場合はCSSのmarginを使うと段落にスペースを入れることができます。
次のサンプルコードはmarginを使って段落の下に50pxのスペースを入れています。

<p style="margin-bottom:50px;">pタグで</p>
<p>改行する</p>

pタグで

改行する

すべての段落に同じ幅のスペースを入れたい場合は、次のようにスタイルシートでpタグに対して次のようにCSSを指定します。

p {
  margin-bottom:50px;
}

line-heightで行間の余白を調整する

文章の行間を調整したい場合はline-heightを使います。
次のサンプルコードではline-heightを使って行間を35pxに指定しています。

<p style="line-height:35px;">pタグで</p>
<p style="line-height:35px;">改行する。line-heightで行間の余白を調整する</p>

pタグで

改行する。line-heightで行間の余白を調整する

すべての文章の行間を同じ幅に調整したい場合は、次のようにスタイルシートでpタグに対してline-heightを指定します。

p {
  line-height:35px;
}

まとめ

この記事ではHTMLで改行をする次の3つの方法をご紹介しました。

  • brタグを使う方法
  • pタグを使う方法
  • preタグを使う方法

どれも同じように改行をできますが、それぞれのタグが持つ意味が違うので用途に応じて使い分ける必要があります。

改行するために使うタグは多くの場合brタグかpタグになります。
段落内で改行するときはbrタグ、段落を伴う改行の場合はpタグと使い分けましょう。

brタグで改行する場合は、次のように改行したい位置に<br>を挿入します。

brタグで<br>改行する
brタグで
改行する

pタグで段落を伴う改行の場合は、次のように段落ごとにpタグで囲みます。

<p>pタグで</p><p>改行する</p>

pタグで

改行する

よくコードに関するお問い合わせを頂くので、webエンジニアに人気のslackでゆるコミュを作りました。
コードに関する質問はゆるコミュでお願いします。ゆるコミュの参加・質問は無料です。

HTML / css / laravel / Django / wordpress / shopify / php / python / javascript / jQuery / React / AWS など初心者から中級者の質問を中心にお答え致します。

メンターとしての参加も大歓迎です。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

エンジニアを目指す方必見!おすすめプログラミングスクール

最短でエンジニアになるには、いかに効率よく学習するかが重要です。モチベーションを維持しながら最短でエンジニアを目指すならプログラミングスクールを利用するのもおすすめです。

コメント

コメントする

目次
閉じる