HOME
HTMLの改行コードbrタグとは？
HTMLでは、テキスト作成時にエンターキーを押して改行させていても、実際の表示では改行されません。
brタグの使い方
HTMLで改行させたい場合には、<br>タグを用います。<br>タグには開始タグや閉じタグといったものなく、 改行させたい箇所に<br>タグを記述して使用します。
HTML
<p>吾輩わがはいは猫である。名前はまだ無い。<br>どこで生れたかとんと見当けんとうがつかぬ。<br>何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。<br>吾輩はここで始めて人間というものを見た。<br>しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。</p>
プレビュー
吾輩わがはいは猫である。名前はまだ無い。
どこで生れたかとんと見当けんとうがつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。
しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。
どこで生れたかとんと見当けんとうがつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。
しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。
brタグもカスタマイズできる
画面サイズによって改行の有無を切り替える方法
パソコンで見ていた時は改行を入れた方が見やすくても、スマホなど画面サイズが小さくなった時に折り返されるなどして 見づらくなる場合があります。
パソコンで見た場合
スマホで見た場合
こんな場合はCSSを使用して画面サイズに応じて<br>タグを非表示にすればOK
画面サイズによってCSSを切り替える方法（メディアクエリ）について詳しくはこちら
CSSで要素を消したり見えなくしたりする方法について詳しくはこちら
@media only screen and (max-width:600px){
br{
display:none;
}
}
<p>吾輩わがはいは猫である。名前はまだ無い。<br>どこで生れたかとんと見当けんとうがつかぬ。<br>何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。<br>吾輩はここで始めて人間というものを見た。<br>しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。</p>
|
|
|---|
ちなみに<br>タグにもクラスやidを付与できるので、特定の<br>タグだけ処理を変えるといったことも可能です。
まとめ
普段文章を書く際にはエンターキーを押すだけでできる改行も、HTMLではいちいち<br>タグを書かなければならないので わずらわしく感じるかもしれません。しかしながら、CSSで改行を調整できるなど優れた面も備えています。HTMLの基本なのでしっかりと覚えたいタグのひとつです。
