SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、リファレンス解説です。
  3. 0:03今回からHTMLタグ編が始まります。
  4. 0:06最初のテーマは、ダブリュービーアールです。
  5. 0:09これは、長い文字列の中で、必要ならここで折り返してもよい、という位置を示す小さなタグです。
  6. 0:15画面に十分な幅があれば何も起きず、一行のまま表示されますが、スマートフォンのような狭い画面では、
  7. 0:21はみ出す代わりに、示した位置で自然に折り返してくれます。
  8. 0:26今回は、この控えめですが便利なタグを、初心者向けに分かりやすく解説します。
  9. 0:31小さな工夫ですが、スマートフォンでの読みやすさを大きく助けてくれます。
  10. 0:36まず、よく似た名前のビーアールタグとの違いを押さえましょう。
  11. 0:41ビーアールは、置いた場所で必ず改行します。
  12. 0:45住所や詩のように、改行そのものに意味があるときに使うものです。
  13. 0:50一方、ダブリュービーアールは必ず改行するわけではありません。
  14. 0:55あくまで、折り返してよい候補を示すだけです。
  15. 0:59画面幅に余裕があれば改行せず、幅が足りなくなったときだけ、その位置で折り返します。
  16. 1:06この、強制ではなく候補、という点が最大の違いです。
  17. 1:10迷ったら、狭い画面で困るときだけ折れてほしいのかを考えてみてください。
  18. 1:16この違いを理解すると、二つのタグを迷わず使い分けられるようになります。
  19. 1:22基本の書き方です。
  20. 1:23ダブリュービーアールは、終了タグを持たない空要素です。
  21. 1:27書き方は、山かっこにダブリュービーアールと書く、これだけです。
  22. 1:32閉じタグは書きませんし、中に文字を入れることもありません。
  23. 1:36文章や単語の途中、折り返してほしい位置に、そっと差し込むように使います。
  24. 1:41スライドの例では、英単語のハイフンの後ろに置いています。
  25. 1:45置いただけでは見た目は変わらないので、最初は本当に効いているのか不安になるかもしれませんが、
  26. 1:49それが正常な動きです。
  27. 1:53次のセクションで、実際の効き方を確認しましょう。
  28. 1:57短いタグなので、覚えること自体はとても少なくて済みます。
  29. 2:01記事の実例を見てみましょう。
  30. 2:03ピータグの中に、ベリー、ロング、識別名、例、という意味の長い英単語のつながりを書き、
  31. 2:09ハイフンの後ろにダブリュービーアールを二か所入れています。
  32. 2:15パソコンのような広い画面で見ると、これは一行でそのまま表示されます。
  33. 2:20ところが、ブラウザーの幅をぐっと狭くしていくと、単語の途中で無理に切れたり、
  34. 2:26画面からはみ出したりせず、ダブリュービーアールを置いた位置で折り返します。
  35. 2:32試すときは、保存して再読み込みし、幅を変えながら表示を確認してください。
  36. 2:38この幅を変えて確かめる、という手順が大切です。
  37. 2:42ハイフンの位置が、そのまま自然な区切りになっている点にも注目してください。
  38. 2:48どんな場面で役立つのでしょうか。
  39. 2:50代表例は、長いユーアールエルやファイルパスです。
  40. 2:54これらは空白がなく、ブラウザーが自然な折り返し位置を見つけにくい文字列です。
  41. 2:59また、区切りのない長い英単語や、プログラムで使う長い識別名も同じです。
  42. 3:05スラッシュやハイフン、ドットといった区切り記号の後ろにダブリュービーアールを置いておくと、
  43. 3:09狭い画面でも読みやすく折り返せます。
  44. 3:14逆に、普通の日本語の文章は、文字の間で自然に折り返せるので、基本的には必要ありません。
  45. 3:20困る文字列に絞って使うのがコツです。
  46. 3:23特にスマートフォンでは、はみ出しを防ぐ効果が分かりやすく現れます。
  47. 3:28シーエスエスとの使い分けも知っておきましょう。
  48. 3:32長い文字列全体の折り返し対策なら、シーエスエスのオーバーフローラップなどが向いています。
  49. 3:39こちらは要素全体に効くので、文章がたくさんある場合でも一括で対応できます。
  50. 3:45一方、ダブリュービーアールは、ここでだけ折れてほしい、という場所をピンポイントで指定できます。
  51. 3:53たとえば、意味の区切りを保ちたいときや、特定の単語だけを丁寧に扱いたいときに便利です。
  52. 4:00どちらか一方ではなく、全体はシーエスエス、細かい調整はダブリュービーアール、
  53. 4:05と組み合わせる考え方も覚えておきましょう。
  54. 4:10迷ったときは、まずシーエスエスで全体を整え、必要な場所だけタグで補いましょう。
  55. 4:17属性について確認します。
  56. 4:18ダブリュービーアールには、このタグ専用の属性はありません。
  57. 4:22そのため、ふだんは属性を付けずに、そのまま使います。
  58. 4:26もちろん、ほかの要素と同じく、アイディーやクラス、言語を示すラングといった、
  59. 4:31すべての要素で使える共通属性を付けることはできます。
  60. 4:35ただし、見た目を変えるためのクラスを付けるような使い方は一般的ではありません。
  61. 4:41このタグの役割は、あくまで折り返し候補の位置を示すことです。
  62. 4:45属性を覚える負担がない分、とても気軽に使えるタグだと言えます。
  63. 4:50子要素に付ける属性と混同しないように注意しましょう。
  64. 4:53書くことが少ない分、置く位置に集中できるのがこのタグの良さです。
  65. 4:58表示の確認方法です。
  66. 4:59このタグは、広い画面では効果が見えません。
  67. 5:03確認するときは、ブラウザーのウィンドウ幅を少しずつ狭くしていくか、開発者ツールでスマートフォン表示に切り替えてください。
  68. 5:11三百二十ピクセル程度の狭い幅でも、内容が欠けたり、横にはみ出したりしていないかを見ます。
  69. 5:18また、文字を拡大した状態でも同じように確認しましょう。
  70. 5:22折り返し位置が不自然でないか、読みにくくなっていないかも合わせてチェックしてください。
  71. 5:28幅を変える前と後で比べると、ダブリュービーアールの働きがはっきり分かります。
  72. 5:34確認を習慣にすると、ほかのレイアウト崩れにも早く気付けます。
  73. 5:38よくある間違いと注意点です。
  74. 5:40まず、すべての位置に入れすぎないことです。
  75. 5:43候補が多すぎると、意図しない場所で折り返して読みにくくなることがあります。
  76. 5:48意味の区切りになる場所に絞りましょう。
  77. 5:51次に、ダブリュービーアールで折り返しても、行末にハイフンは自動では付きません。
  78. 5:56ハイフンがほしい場合は、別の方法を検討します。
  79. 6:00また、もともと空白で区切られる文章では効果が分かりにくいので、長い単独の文字列かどうかを先に確認してください。
  80. 6:07そして、閉じタグを書いてしまう間違いにも注意しましょう。
  81. 6:11このタグに閉じタグはありません。
  82. 6:13置く位置は、読み手が意味を取りやすい区切りを選ぶことが大切です。
  83. 6:18ブラウザー互換性を確認します。
  84. 6:20記事が参照するエムディーエヌの記録では、要素本体はクロームが一以降、エッジが十二以降、
  85. 6:25ファイアフォックスが一以降、サファリが四以降で対応しています。
  86. 6:30どれもかなり古いバージョンから使えるため、現在の主要ブラウザーでは安心して使える基本的な要素だと言えます。
  87. 6:37ただし、これは要素本体の対応です。
  88. 6:40スマートフォンでの見え方は画面幅やフォントでも変わるので、対象にしている実機や、
  89. 6:44近い幅の表示でも実際に試しておくと、より確実です。
  90. 6:49対応表だけで終わらせず、自分の目で確かめる習慣を持ちましょう。
  91. 6:53歴史の長い要素なので、学習用のページでも安心して試せます。
  92. 6:57最後に練習とまとめです。
  93. 6:59まとめます。
  94. 7:00ダブリュービーアールは、長い文字列の中で、必要なら折り返してよい位置を示す空要素でした。
  95. 7:07ビーアールのように必ず改行するのではなく、幅が足りないときだけ折り返すのが特徴です。
  96. 7:14専用の属性はなく、長いユーアールエルや識別名の区切りに置くのが基本でした。
  97. 7:20練習として、手元のエイチティーエムエルに長い英単語を用意し、区切りの位置にダブリュービーアールを入れて、
  98. 7:27ブラウザーの幅を狭くしながら変化を観察してみてください。
  99. 7:34お疲れさまでした。
  100. 7:35次回もHTMLタグを一つずつ、丁寧に学んでいきましょう。
  101. 7:40まずは一か所だけ入れて、効果を自分の目で確かめることから始めましょう。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

wbrタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。長い文字列で、必要なら折り返してよい位置を示します。

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