【HTML】brタグを使って文章を改行する方法

投稿日:2020年12月04日（最終更新日:2024年09月19日）

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

本記事は執筆時点（2020年12月04日）の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

brタグとは？

brタグは、HTMLで文章の改行を行う際に使用するタグです。HTMLでは、ソースコード上で改行していても、実際のブラウザでの表示では改行されませんので文中で改行したいときにはbrタグを使う必要があります。

ちなみにbrとは「Break」の略です。

brタグの使い方

brタグには開始タグや閉じタグといったものなく、改行させたい箇所にbrタグを記述して使用します。

HTML

<p>吾輩わがはいは猫である。名前はまだ無い。<br>どこで生れたかとんと見当けんとうがつかぬ。<br>何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。<br>吾輩はここで始めて人間というものを見た。<br>しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。</p>

プレビュー

吾輩わがはいは猫である。名前はまだ無い。
どこで生れたかとんと見当けんとうがつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。
しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。

brタグもカスタマイズできる

画面サイズによって改行の有無を切り替える方法

パソコンで見ていた時は改行を入れた方が見やすくても、スマホなど画面サイズが小さくなった時に折り返されるなどして見づらくなる場合があります。

パソコンで見た場合

スマホで見た場合

そのような状況ではCSSを使用すれば画面サイズに応じてbrタグを非表示にできます。

画面サイズによってCSSを切り替える方法（メディアクエリ）について詳しくはこちら
 CSSで要素を消したり見えなくしたりする方法について詳しくはこちら

@media only screen and (max-width:600px){ br{ display:none; } } <p>吾輩わがはいは猫である。名前はまだ無い。<br>どこで生れたかとんと見当けんとうがつかぬ。<br>何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。<br>吾輩はここで始めて人間というものを見た。<br>しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。</p>

@media only screen and (max-width:600px){
  br{
      display:none;
  }
}
<p>吾輩わがはいは猫である。名前はまだ無い。<br>どこで生れたかとんと見当けんとうがつかぬ。<br>何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。<br>吾輩はここで始めて人間というものを見た。<br>しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。</p>

ちなみに<br>タグにもクラスやidを付与できるので、特定の<br>タグだけ処理を変えるといったことも可能です。

まとめ

普段文章を書く際にはエンターキーを押すだけでできる改行も、HTMLではいちいち<br>タグを書かなければならないのでわずらわしく感じるかもしれません。しかしながら、CSSで改行を調整できるなど優れた面も備えています。HTMLの基本なのでしっかりと覚えたいタグのひとつです。