SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

HTMLのbrタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 8:15動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエルリファレンス解説です。
  3. 0:04エイチティーエムエルタグ編の百本目は、ビーアールタグです。
  4. 0:08ビーアールは、文章の途中で行を変える、改行のための要素です。
  5. 0:12ただし、どんな改行にも使うわけではありません。
  6. 0:16詩の行や住所の行のように、改行そのものが内容の一部になっている場面で使うのが基本です。
  7. 0:22今回は、ビーアールの意味、空要素としての書き方、使うべき場面と使わない場面、
  8. 0:28段落分けとの違い、コード例、ブラウザー互換性、そしてよくある間違いまで順番に確認します。
  9. 0:34小さな要素ですが、使い方を間違えやすい代表格でもあるので、判断の基準をしっかり身に付けましょう。
  10. 0:41まず、ビーアールの役割を整理します。
  11. 0:44ビーアールは、今の行をそこで終わらせて、次の行から続きを表示します。
  12. 0:50ポイントは、段落そのものは変わらないことです。
  13. 0:54話題が変わるわけでも、新しいまとまりが始まるわけでもなく、あくまで一つの段落やまとまりの中で行が替わります。
  14. 1:02たとえば住所では、都道府県と市区町村、建物名と部屋番号といった行分け自体が読み方を決めます。
  15. 1:10詩や歌詞でも、行の区切りは作品の一部です。
  16. 1:13こうした、行を変えることに意味がある場所で使うのがビーアールです。
  17. 1:19逆に言えば、改行を消しても内容の意味が変わらないなら、それはビーアールの出番ではない可能性が高い、
  18. 1:23ということです。
  19. 1:28基本の書き方を見ていきます。
  20. 1:30ビーアールは空要素なので、開始タグだけで完結し、終了タグは書きません。
  21. 1:35タグの間に文字を入れることもありません。
  22. 1:38改行したい文字と文字の間に、そのままビーアールを置くだけです。
  23. 1:42昔の書き方でスラッシュを付けた形を見かけることもありますが、現在のエイチティーエムエルではビーアールとだけ書くのが標準です。
  24. 1:51配置する場所は、本文を表示するボディの中の、段落や住所などの要素の内側です。
  25. 1:56行を変えたい位置が、そのままビーアールを置く位置になります。
  26. 2:01なお、エックスエイチティーエムエル時代の書き方が混ざっていても表示はされますが、
  27. 2:05新しく書くコードでは統一しておくのが安心です。
  28. 2:09属性を確認します。
  29. 2:11ビーアールには、記事で必須とされる専用の属性はありません。
  30. 2:15通常は属性なしで使うのがほとんどです。
  31. 2:17必要に応じて、アイディーやクラス、ラングといった、多くの要素で共通して使えるグローバル属性を指定できます。
  32. 2:24たとえばクラスを付けておくと、画面幅によって改行を表示したり隠したりする、
  33. 2:28といったシーエスエスでの調整がしやすくなります。
  34. 2:32なお、昔使われていたクリアという属性は、現在の標準では使いません。
  35. 2:37回り込みの解除は、シーエスエスのクリアプロパティで指定してください。
  36. 2:41クラス名は、スマートフォンだけ、といった用途が分かる名前にしておくと、あとから見返したときに意図が伝わりやすくなります。
  37. 2:50記事の活用事例をもとに、コード例を確認します。
  38. 2:54最初の例は会場案内です。
  39. 2:56ピータグの中に、東京都の会場、ビーアール、二階受付カウンターと書くことで、
  40. 3:01同じ案内文の中で行が替わります。
  41. 3:06住所でも考え方は同じで、行ごとに区切ることで読みやすくなります。
  42. 3:12次の例は詩です。
  43. 3:13行の区切りが作品のリズムそのものなので、一行ごとにビーアールを入れます。
  44. 3:20書き終えたら保存して再読み込みし、意図した位置で改行されているか、開発者ツールでも構造を確認してください。
  45. 3:30住所の例では、読み手が宛先を書き写す場面を想像すると、行の区切りがあるほうが迷いにくいことがよく分かります。
  46. 3:40よく混同される、ピータグとの違いを整理します。
  47. 3:43ピーは段落を表す要素で、話題や意味のまとまりごとに文章を分けます。
  48. 3:48ピーを分けると、新しい段落が始まるため、ブラウザーの表示でも段落の間に余白が生まれます。
  49. 3:54一方、ビーアールは段落の中での改行で、余白を空けて新しい話題を始めるものではありません。
  50. 4:01判断の目安は、その区切りが意味の区切りかどうかです。
  51. 4:05意味が変わるならピーで段落を分け、意味は続いたまま行だけ変えるならビーアール、
  52. 4:08と覚えてください。
  53. 4:12読み上げソフトでも、段落の区切りと行の区切りは扱いが異なる場合があるため、
  54. 4:16この使い分けはそのまま伝わりやすさに影響します。
  55. 4:21ビーアールを使うべき場面をまとめます。
  56. 4:24代表例は三つです。
  57. 4:25一つ目は住所です。
  58. 4:27郵便番号、都道府県、番地、建物名といった行分けは、宛先の読み方そのものです。
  59. 4:33二つ目は、詩や歌詞、俳句などです。
  60. 4:36どこで行が替わるかが、作品の区切りになります。
  61. 4:40三つ目は、会場案内のような短い文で、行を分けたほうが場所や順番が伝わりやすくなる場合です。
  62. 4:47いずれも共通しているのは、画面の幅が変わっても、その位置で改行する意味が残ることです。
  63. 4:54この条件に当てはまるかが、使うかどうかの判断基準になります。
  64. 4:59行を区切ることで、順番や対応関係がはっきりする場合も、ビーアールが向いている場面と言えます。
  65. 5:06逆に、使わない場面もはっきりさせておきます。
  66. 5:10段落と段落の間に余白を作りたいときに、ビーアールを何個も並べるのは避けてください。
  67. 5:16文字の大きさを変えると余白の感じが崩れやすく、読み上げでも余分な区切りになってしまいます。
  68. 5:23段落間の間隔は、シーエスエスのマージンで指定するのが正解です。
  69. 5:28行と行の間隔を広げたいなら、ラインハイトを使います。
  70. 5:32つまり、意味はエイチティーエムエル、見た目の間隔はシーエスエス、と役割を分けることが大切です。
  71. 5:39ビーアールは余白作りの道具ではありません。
  72. 5:42見た目を整えるためにタグを増やすのではなく、まず段落や見出しといった意味の構造から考える順番を大切にしてください。
  73. 5:51スマートフォンのような狭い画面と、読み上げへの配慮も確認します。
  74. 5:56狭い画面では、文章がもともと自動で折り返されるため、ビーアールの改行と重なって、
  75. 6:01一行がとても短くなってしまうことがあります。
  76. 6:05パソコン向けの改行が邪魔になる場合は、クラスを付けて、画面幅によってビーアールを非表示にする方法もあります。
  77. 6:13ただし、隠しても意味が崩れない内容に限ります。
  78. 6:17また、読み上げソフトでは、改行の位置で一拍置かれることがあります。
  79. 6:22不自然な区切りになっていないか、三百二十ピクセル程度の幅や文字拡大でも試してください。
  80. 6:28デザインの都合で入れた改行ほど、画面幅が変わったときに崩れやすい、という点も覚えておくと判断がぶれにくくなります。
  81. 6:36ブラウザー互換性を確認します。
  82. 6:39記事が紹介するエムディーエヌのデータでは、ビーアール要素本体は、クロームが一以降、
  83. 6:45エッジが十二以降、ファイアフォックスが一以降、サファリが一以降で対応しています。
  84. 6:51エイチティーエムエルの中でも最も古くからある要素の一つで、基本の改行については、
  85. 6:55現在の主要ブラウザーで問題なく使えます。
  86. 6:59スマートフォンのブラウザーでも同様です。
  87. 7:02心配なのは互換性よりも使い方のほうで、余白作りに使っていないか、段落分けと混同していないかを、
  88. 7:07実装のたびに確認する習慣が大切です。
  89. 7:12対応が広いからこそ、古いページでも新しいページでも同じ書き方で使える、初心者にとって扱いやすい要素です。
  90. 7:20まとめとして、よくある間違いを三つ挙げます。
  91. 7:24一つ目は、ビーアールを何個も並べて余白を作ってしまうことです。
  92. 7:29余白はシーエスエスで指定してください。
  93. 7:33二つ目は、段落分けの代わりにビーアールを使うことです。
  94. 7:38話題が変わるならピーで段落を分けてください。
  95. 7:42三つ目は、終了タグを書いてしまうことです。
  96. 7:46ビーアールは空要素なので、終了タグは不要です。
  97. 7:50ビーアールは、詩や住所など、内容として必要な改行に入れる要素です。
  98. 7:56これでビーアールタグの解説を終わります。
  99. 8:00まずは住所の行分けから、意味のある改行で練習してみてください。
  100. 8:06迷ったときは、その改行が内容の一部かどうかを問い直すことが、正しい使い分けへの一番の近道です。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

brタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。詩や住所など、内容として必要な改行。段落間の余白はCSSで指定します。

解説記事・サンプルコードを読む：HTMLのbrタグとは？属性・使い方・ブラウザー互換性と活用例 →