HTMLで改行する方法【brタグの使い方をわかりやすく解説】

投稿日:2020年12月04日（最終更新日:2022年02月15日）

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

HTMLの改行コードbrタグとは？

HTMLでは、テキスト作成時にエンターキーを押して改行させていても、実際の表示では改行されません。

brタグの使い方

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

HTML

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

プレビュー

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

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

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

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

パソコンで見た場合

スマホで見た場合

こんな場合はCSSを使用して画面サイズに応じて タグを非表示にすればOK

画面サイズによって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>

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