SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエルリファレンス解説です。
  3. 0:03エイチティーエムエルタグ編の百三本目は、ビーディーオータグです。
  4. 0:08ビーディーオーは、文字が並ぶ方向を、ブラウザーの自動判定に任せず、明示的に上書きするための要素です。
  5. 0:15日本語や英語は左から右へ読みますが、アラビア語やヘブライ語は右から左へ読みます。
  6. 0:21異なる方向の文字が混ざると、表示順が崩れることがあります。
  7. 0:25今回は、ビーディーオーの意味、ディーアイアール属性の使い方、ビーディーアイとの違い、
  8. 0:30コード例、ブラウザー互換性、そしてよくある間違いまで順番に確認します。
  9. 0:36普段は出番の少ない、けれど知っておくと文字表示の仕組みがよく分かる要素です。
  10. 0:41まず、ビーディーオーの役割を整理します。
  11. 0:44ブラウザーはふだん、ユニコードの双方向アルゴリズムと呼ばれるルールで、文字ごとにどちらの方向へ並べるかを自動で判断しています。
  12. 0:54日本語の文章に英数字やアラビア語が少し混ざっても、多くの場合は自然に表示されるのは、
  13. 0:58この自動判定のおかげです。
  14. 1:02ビーディーオーは、その自動判定をあえて止めて、囲んだ範囲の方向を開発者が言い切るための要素です。
  15. 1:10つまり、表示順をブラウザー任せにせず、こちらで決める、という強い指定です。
  16. 1:15そのため記事でも、通常の文章では必要ありません、と強調されています。
  17. 1:21本当に順序を固定しなければならない、限られた場面でだけ使う要素だと覚えてください。
  18. 1:27基本の書き方を見ていきます。
  19. 1:29この教材では、開始タグと終了タグを明示して書きます。
  20. 1:34ビーディーオーは文章の途中の一部分を囲むインライン要素なので、段落を表すピータグの中などに置いて使います。
  21. 1:43囲む範囲は、方向を固定したい文字列だけに絞るのが基本です。
  22. 1:48段落全体やページ全体を囲むような使い方はしません。
  23. 1:52なぜなら、広い範囲を上書きすると、句読点や記号の位置まで意図せず変わり、
  24. 1:57かえって読みにくくなるからです。
  25. 2:01まずは、短い文字列をピンポイントで囲む形を覚えましょう。
  26. 2:06終了タグを書き忘れると、その後の文章まで方向が変わってしまうので、タグの対応は必ず確認してください。
  27. 2:15次に、最も重要なディーアイアール属性を確認します。
  28. 2:18ビーディーオーでは、この属性の指定が必須です。
  29. 2:22方向を上書きする要素なのに、どちらの方向かを示さなければ意味が決まらないからです。
  30. 2:28値は二つだけです。
  31. 2:29エルティーアールはレフト・トゥ・ライト、つまり左から右へ並べる指定です。
  32. 2:34アールティーエルはライト・トゥ・レフト、つまり右から左へ並べる指定で、この場合は文字の並びが逆順に表示されます。
  33. 2:42一般の要素では、自動判定を意味するオートという値も選べますが、ビーディーオーでは使いません。
  34. 2:49上書きする以上、方向は開発者が明確に決める、というのがこの要素の約束です。
  35. 2:55値を書き忘れたり、つづりを間違えたりすると、上書きは働きません。
  36. 2:59似た名前のビーディーアイタグとの違いを押さえましょう。
  37. 3:04ビーディーアイは、ユーザー名など、外から来た文字列の方向を、周囲の文章から独立させるための要素です。
  38. 3:12中の文字の方向は自動判定に任せつつ、周囲へ影響が漏れないように区切ります。
  39. 3:18一方、ビーディーオーは、自動判定そのものを上書きして、方向を強制的に決めてしまいます。
  40. 3:25たとえるなら、ビーディーアイは仕切りを作るだけ、ビーディーオーは並び順まで命令する、
  41. 3:29という違いです。
  42. 3:33実務では、まず言語を示すラング属性や、通常のディーアイアール属性、そしてビーディーアイで足りるかを考え、
  43. 3:40それでも表示順を固定しなければならないときだけ、ビーディーオーを選んでください。
  44. 3:48記事の活用事例をもとに、コード例を確認します。
  45. 3:51ピータグの中に、ディーアイアール属性にアールティーエルを指定したビーディーオーを書き、
  46. 3:56中にエービーシーと数字を入れています。
  47. 4:01これをブラウザーで表示すると、文字の並びが逆になり、数字と英字が反対の順序で現れます。
  48. 4:07もとの文字列そのものが書き換わるわけではなく、見た目の並ぶ方向だけが変わる点に注目してください。
  49. 4:15練習では、エイチティーエムエル入門で作った練習用ファイルをコピーし、エルティーアールとアールティーエルを書き換えて再読み込みし、
  50. 4:22表示がどう変わるかを自分の目で比べると理解が深まります。
  51. 4:29開発者ツールのエレメンツでも、属性の値を確認してみてください。
  52. 4:34では、実際にどんな場面で使うのでしょうか。
  53. 4:37代表的なのは、多言語サイトで、右から左へ書く言語の表示を確認したり、自動判定ではどうしても意図どおりにならない文字列の順序を保証したりする場面です。
  54. 4:49たとえば、方向の異なる文字が混ざった型番や識別コードなどで、表示順が変わると意味まで変わってしまう場合が考えられます。
  55. 4:58また、文字方向の学習や、ブラウザーの表示違いを検証する教材でも、違いを意図的に作るために使われます。
  56. 5:06逆に、日本語だけの通常の記事や、見た目を面白くするために文字を逆向きにしたい、
  57. 5:10といった目的では使いません。
  58. 5:15必要になる場面は限られますが、その限られた場面では、他の方法では代わりが利きにくい要素です。
  59. 5:22シーエスエスとの関係も知っておきましょう。
  60. 5:25シーエスエスには、文字の並び方向を指定するディレクションプロパティと、双方向の扱いを指定するユニコード・バイダイというプロパティがあります。
  61. 5:34ビーディーオーの上書きは、このユニコード・バイダイのバイダイ・オーバーライドに相当する振る舞いを、
  62. 5:39エイチティーエムエルの意味として表したものです。
  63. 5:43単にレイアウト上の見た目を調整したいだけなら、シーエスエスで十分な場合も多くあります。
  64. 5:49ただし、その文字列の方向自体が内容の意味に関わるなら、スタイルを外しても意味が残るよう、
  65. 5:53ビーディーオーで示す方が適切です。
  66. 5:57意味はエイチティーエムエル、装飾や配置はシーエスエス、という分担は、ここでも同じです。
  67. 6:03ブラウザー互換性を確認します。
  68. 6:05記事が紹介するエムディーエヌのデータでは、ビーディーオー要素本体は、クロームが十五以前、
  69. 6:10エッジが十二以降、ファイアフォックスが十以降、サファリが四以前から対応しています。
  70. 6:16いずれもかなり古いバージョンから使えることが分かります。
  71. 6:20エイチティーエムエルの中でも長く安定している機能の一つで、現在の主要ブラウザーでは互換性を心配する必要はほぼありません。
  72. 6:28スマートフォンのブラウザーでも同様に表示できます。
  73. 6:31ただし、対応していることと、正しく使えていることは別です。
  74. 6:35対応状況よりも、方向を上書きする必要が本当にあるか、読み上げで内容が正しく伝わるか、
  75. 6:39といった使い方そのものに注意を向けてください。
  76. 6:44実装前後のチェック項目を確認します。
  77. 6:46まず、その文字列に本当に方向の上書きが必要か、タグありきではなく内容の意味から判断してください。
  78. 6:54ラング属性や通常のディーアイアール属性、ビーディーアイで解決するなら、そちらを優先します。
  79. 7:01次に、見た目の並びだけでなく、読み上げソフトでの読み上げ順や、文字列をコピーしたときの順序が意図と合っているかも確かめてください。
  80. 7:12ビーディーオーは見た目の順序を変えるため、支援技術の利用者を混乱させない配慮が欠かせません。
  81. 7:19さらに、三百二十ピクセル程度の画面幅や文字拡大時にも、内容が欠けずに読めるかを試してください。
  82. 7:27公開前に、前後の文章を含めて声に出して読み、意味が通じるかを確認すると安心です。
  83. 7:33まとめとして、よくある間違いを三つ挙げます。
  84. 7:36一つ目は、ディーアイアール属性を書き忘れることです。
  85. 7:41ビーディーオーでは必須の属性なので、忘れると方向の上書きは働きません。
  86. 7:46二つ目は、見た目の面白さだけを目的に、通常の日本語や英語を逆順にしてしまうことです。
  87. 7:53読みにくくなるだけでなく、読み上げや検索でも意図が伝わらなくなります。
  88. 7:59三つ目は、段落全体や長い文章に使ってしまうことです。
  89. 8:03上書きは、順序を固定しなければならない短い範囲だけに絞ってください。
  90. 8:08ビーディーオーは、文字方向を明示的に上書きする、限定的だからこそ意味のある要素です。
  91. 8:15これでビーディーオータグの解説を終わります。
  92. 8:19まずは記事の例で、エルティーアールとアールティーエルの表示違いを実際に試してみてください。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

bdoタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。dir で文字方向を明示的に上書きします。通常の文章では必要ありません。

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