スライドショー

HTMLのbrタグで改行をする方法と注意点について解説!

今回はHTMLbrタグについて解説をしていきます!

brタグではHTMLのコードで改行をすることが出来ます。

ただこのbrタグで改行以外にも、スペースをあけるために、レイアウトとして使ってしまっている初心者の方もいるのではないのでしょうか。

この記事では、

・brタグとは
・brタグの使い方
・brタグの注意点

について解説をしていきます。

使い方は簡単なbrタグについて、効果的な使い方も解説していくのでぜひご覧ください!

brタグとは

まずはbrタグとは簡単に何かを解説していきましょう。

brタグはbreak(改行)の意味で、HTMLの文章中に改行を入れることが出来るタグです。

こちらのコードをご覧ください。

<html>
    <p>おはようございます
    こんにちは
    こんばんは
    </p>
</html>

実行結果

HTMLのコード上では改行を入れているのにもかかわらず、実際の実行結果を見てみると半角スペースに置き換わっていることがわかりますね。

これを解決するのがbrタグになります。

brタグの使い方

それではbrタグの使い方を見ていきましょう。

先程のコードをしっかりと改行させてみます。

こちらのコードをご覧ください。

<html>
    <p>おはようございます<br>こんにちは<br>こんばんは</p>
</html>

実行結果

こちらのコードでは改行を入れる代わりに、brタグが入っています。

そのbrタグの部分でしっかりと改行がされていることが分かるかと思います。

基本的な使い方はこれだけで、閉じタグも必要ありません。

brタグの注意点

brタグは改行をしたい部分にそのまま入れるだけで改行することができる、とても便利で簡単なタグです。

ただこのbrタグは使い所を間違えると読みにくくなったり、デザインがしにくくなるような部分もあります。

brタグを使わないほうが良い場所

brタグを使うと文章が自分の意図した場所で改行されて、とても見やすくなると思っている方もいるかも知れません。

ただし、PC版SP版(AndroidやiPhoneなどの画面サイズ)でページが同じになっているようなレスポンシブ対応されたページではbrタグを使うのは避けたほうが無難かもしれません。

こちらをご覧ください。

<html>
    <p>HTML5(エイチティーエムエル・ファイブ)は、HyperText Markup Languageの5回目に当たる大幅な改定版である。</p>
    <p>HTML5はWeb Hypertext Application Technology Working Groupによって2004年に定められた<br>Web Applications 1.0にWeb Forms 2.0を取り入れたものがWorld Wide Web Consortiumの専門委員会に採用され、<br>World Wide Web Consortiumより2008年1月22日にドラフト(草案)が発表され、<br>2014年10月28日に HTML5 が勧告され[1]、<br>2016年11月1日に HTML 5.1 が勧告され[2]、<br>2017年12月14日に HTML 5.2 が勧告された[3]。<br>(出典:https://ja.wikipedia.org/wiki/HTML5)<p>
</html>

実行結果

PC版のサイズで見るには然るべきところで改行がされていて見やすいと思います。

ただ、これをSP版のサイズで見てみましょう。

実行結果

このように、改行をしたことで見づらくなってしまった部分が出来てしまいました。

これを防ぐために、レスポンシブ対応されたページでは改行を必要最低限にして、段落ごとにpタグで囲って改行させることを意識しましょう。

brタグをレイアウトで使う場合

brタグを連続して使うことで余白を作ることも出来ます。

こちらをご覧ください。

<html>
    <p>ここから<br><br><br><br>ここまで空白です。<p>
</html>

実行結果

ただし、これはレイアウトの観点からは最適とは言えません。

空白の部分を作りたいのであれば、CSSmarginプロパティを使って、適切な方法で余白を作りましょう。

marginの詳しい使い方はこちらの記事をご覧ください。

CSSのmarginとは?余白を指定するpaddingと何が違うのかまで徹底解説
更新日 : 2019年6月4日

まとめ

この記事ではbrタグについて、基本的な使い方から注意点を解説してきました。

使い方はわかっていただけだでしょうか?

簡単に使えるbrタグですが、どのような場面で使うのが好ましいかをよく考えてつかっていきましょう。

また、brタグをデザインで使わないように気をつけましょう。

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

ryo

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説