HTMLHTMLのbrタグで改行をする方法と注意点について解説!ryo2019/1/102019/1/10今回はHTMLのbrタグについて解説をしていきます!brタグではHTMLのコードで改行をすることが出来ます。このbrタグで改行以外にも、スペースをあけるために、レイアウトとして使ってしまっている初心者の方もいるのではないのでしょうか。・brタグの注意点について解説をしていきます。まとめbrタグとはまずはbrタグとは簡単に何かを解説していきましょう。brタグはbreak(改行)の意味で、HTMLの文章中に改行を入れることが出来るタグです。こちらのコードをご覧ください。</p></html>実行結果HTMLのコード上では改行を入れているのにもかかわらず、実際の実行結果を見てみると半角スペースに置き換わっていることがわかりますね。これを解決するのがbrタグになります。brタグの使い方それではbrタグの使い方を見ていきましょう。先程のコードをしっかりと改行させてみます。こちらのコードをご覧ください。<p>おはようございます<br>こんにちは<br>こんばんは</p></html>実行結果こちらのコードでは改行を入れる代わりに、brタグが入っています。そのbrタグの部分でしっかりと改行がされていることが分かるかと思います。基本的な使い方はこれだけで、閉じタグも必要ありません。brタグの注意点brタグは改行をしたい部分にそのまま入れるだけで改行することができる、とても便利で簡単なタグです。このbrタグは使い所を間違えると読みにくくなったり、デザインがしにくくなるような部分もあります。brタグを使わないほうが良い場所brタグを使うと文章が自分の意図した場所で改行されて、とても見やすくなると思っている方もいるかも知れません。PC版とSP版(AndroidやiPhoneなどの画面サイズ)でページが同じになっているようなレスポンシブ対応されたページではbrタグを使うのは避けたほうが無難かもしれません。こちらをご覧ください。Languageの5回目に当たる大幅な改定版である。<br>(出典:https://ja.wikipedia.org/wiki/HTML5)<p></html>実行結果PC版のサイズで見るには然るべきところで改行がされていて見やすいと思います。これをSP版のサイズで見てみましょう。実行結果このように、改行をしたことで見づらくなってしまった部分が出来てしまいました。これを防ぐために、レスポンシブ対応されたページでは改行を必要最低限にして、段落ごとにpタグで囲って改行させることを意識しましょう。brタグをレイアウトで使う場合brタグを連続して使うことで余白を作ることも出来ます。こちらをご覧ください。<p>ここから<br><br><br><br>ここまで空白です。<p></html>実行結果ただし、これはレイアウトの観点からは最適とは言えません。空白の部分を作りたいのであれば、CSSのmarginプロパティを使って、適切な方法で余白を作りましょう。marginの詳しい使い方はこちらの記事をご覧ください。2019年6月4日まとめこの記事ではbrタグについて、基本的な使い方から注意点を解説してきました。使い方はわかっていただけだでしょうか?簡単に使えるbrタグですが、どのような場面で使うのが好ましいかをよく考えてつかっていきましょう。brタグをデザインで使わないように気をつけましょう。TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。