brタグとは
brとは’Break’の略です。brタグはHTMLで改行を行うためのタグで、まとまりのある長い文章を改行する際に使用します。非常に便利なタグですが、brタグを多用すると見づらいWebサイト、読みづらいコンテンツになってしまいます。
わかりやすいWebサイトを作成するためにはbrタグの適切な使い方や似たような効果を持つタグについて理解し、シチュエーションごとに適切なタグを使えるようになる必要があります。
HTMLで改行するための方法
改行のためのbrタグ
brタグを挿入することで改行したい箇所を改行することができます。brタグはこのタグの直前で改行されるため、文末に挿入します。
<p>10年を超えるデジタルマーケティングの経験<br>
累計800社以上のお手伝い<br>
月間800記事以上のコンテンツ制作の実績</p>出力結果
段落のためのpタグ
pタグは段落を意味するタグで、’paragraph’の頭文字を取っています。使用する際は<p>文章</p>のように、開始タグと終了タグで文章を囲む形で使用します。画像で表されたテキストなどもこのpタグを使用します。一般的には1行分改行するため、brタグを使用した改行とは幅が異なります。
<p><p>10年を超えるデジタルマーケティングの経験</p></p>
<p><p>累計800社以上のお手伝い</p></p>
<p><p>月間800記事以上のコンテンツ制作の実績</p></p>出力結果
preタグ（非推奨）
preタグは整形済みテキスト (preformatted text) を表し、このタグで囲んだ文章はソースコードの改行がそのまま反映されます。ファイル内のレイアウトをそのまま反映する他、等幅フォントと呼ばれるフォントが使用されます。
下の画像を見ても、brタグやpタグのときと行間の違いが確認できます。自動的な折り返しがされなくなるので、使用は非推奨です。特にWebサイトをスマートフォンでも表示させたいという場合はできるだけ使わないようにすると良いです。
<pre>10年を超えるデジタルマーケティングの経験
累計800社以上のお手伝い
月間800記事以上のコンテンツ制作の実績</pre>出力結果
brタグの使い方と注意点
スペースを空ける目的でbrタグを使用しない
brタグを使用する際の間違いとしてよくあるのが、改行以外の目的でbrタグを使用してしまうことです。例えば、下の画像のように間隔をあける目的で使用してしまう場合です。段落を分けたい場合はpタグを使いましょう。視覚的に間隔を開けたいのであればCSSを用いて改行の幅を調整する必要があります。brタグ同様、スペースを空けることを目的としたpタグの連続使用にも注意しましょう。
<p>10年を超えるデジタルマーケティングの経験<br>
<br>
累計800社以上のお手伝い<br>
<br>
月間800記事以上のコンテンツ制作の実績</p>出力結果
brタグを多用しない
brタグを改行目的で使用するのは適切な使い方ですが、多用しすぎるとデバイスによっては見づらくなってしまう可能性があります。HTMLで書かれた文章は基本的に閲覧しているデバイスの横幅まで達すると自動で改行される仕組みになっています。そのため、スマートフォン等の横幅の狭いデバイスで見ていると「brタグでの改行」+「横幅による自動改行」となり非常に見にくいレイアウトになってしまいます。
brタグを用いて、下のように改行した例を見てみましょう
<p>サイトエンジン株式会社が<br>
10年を超えるデジタルマーケティングの経験、<br>
800社以上のお手伝いと<br>
月間800記事以上のコンテンツ制作の実績で<br>
お客様のデジタルマーケティングを支援いたします！</p>出力結果
パソコンで見た場合はこのようにきれいに改行されています。ですがこれを横幅の狭いデバイスで見た場合は以下のように不自然な改行となり、見づらいサイトになってしまう可能性があります。
このように不自然なレイアウトにならないためには、スマホなどのデバイスでレイアウトをチェックすること、そもそもbrタグを多用しないことを意識する必要があります。
行間はCSSで調整しよう
brタグやpタグを多用せずに行間を調整する際にお勧めなのがCSSを使用した方法です。CSSはWebページのスタイル（レイアウト）を指定するための言語で、HTMLで書かれたタグにスタイルを適用させることができます。
以下の例ではpタグに行間を調整することができる「line-heightプロパティ」を適用させています。行間の指定方法もいくつかあり、代表的なものだとpx,%,emなどで指定する方法があります。例では3種類のCSSを示していますが、実際に適用する際はどれか一種類だけで行間を変更することが可能です。
また、/* */で囲ってある部分はコメントアウトと呼び、CSSの処理を無効化します。主にコードについてのメモや一時的に無効化したい処理に対して使います。
p {line-height: ~px} /*pxで指定*/
p {line-height: ~%} /*文字の基準サイズに対する割合*/
p {line-height: ~em} /*文字の基準サイズを1emとしたときの値*/文章を入力し、エンターキーで改行すると自動でbrタグを挿入したコードを表示してくれたり、もともとbrタグの入っているコードからbrタグを取り除いてくれたりするツールです。普段通りに文用を書くだけで改行の設定ができるので、長文を書く際、何度も改行する文章を書く際はぜひご活用ください。
HTMLやWikiの改行タグ自動挿入機-Cost-Simulator.com
まとめ
今回はbrタグの意味や使い方、注意点をbrタグ以外の改行可能なタグである「pタグ」「preタグ」と合わせてご紹介しました。それぞれのタグの用途や注意点を把握して、シチュエーションに合わせたコードを書けるようにしましょう。また、最後に紹介した改行ツールなどをもちいて効率的にコードを書いてみましょう！
タグについての他記事
見出しタグ(hタグ)の使い方とは？SEOと読みやすさの両方に影響