SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエルリファレンス解説です。
  3. 0:03エイチティーエムエルタグ編の百四本目は、ビーディーアイタグです。
  4. 0:08ビーディーアイは、双方向テキストの分離、つまりバイダイレクショナル・アイソレートという名前のとおり、
  5. 0:14外から来た文字列の文字方向を、周囲の文章から独立させるための要素です。
  6. 0:20日本語や英語は左から右へ読みますが、アラビア語やヘブライ語は右から左へ読みます。
  7. 0:26ユーザー名のように、どちらの方向の文字が入るか分からない文字列を表示するとき、
  8. 0:30この分離が役立ちます。
  9. 0:34今回は、ビーディーアイの意味、ビーディーオーとの違い、ディーアイアール属性、
  10. 0:39コード例、ブラウザー互換性、そしてよくある間違いまで順番に確認します。
  11. 0:44まず、なぜ表示が崩れるのかを知っておきましょう。
  12. 0:48ブラウザーはふだん、ユニコードの双方向アルゴリズムというルールで、文字ごとにどちらの方向へ並べるかを自動で判断しています。
  13. 0:57左から右へ書く文字と、右から左へ書く文字が一つの文に混ざると、この判定が前後の文字に影響し合い、
  14. 1:04ハイフンや感嘆符、数字といった中立的な記号の位置が、意図しない場所へ跳んでしまうことがあります。
  15. 1:12たとえばアラビア語のユーザー名の直後に件数や記号を続けると、名前だけでなく、
  16. 1:17その後ろの文章まで並びが崩れて読める場合があります。
  17. 1:22自分で書いた文章なら直せますが、利用者が入力した名前は、どんな文字が来るか事前に分かりません。
  18. 1:29ここがビーディーアイの出番です。
  19. 1:31ビーディーアイの役割は、囲んだ範囲を、方向の判定における一つの独立した島として扱うことです。
  20. 1:38ポイントは二つあります。
  21. 1:40一つ目は、中身の文字方向そのものは、ブラウザーの自動判定に任せることです。
  22. 1:45ビーディーアイは方向を決めつけません。
  23. 1:48二つ目は、その範囲の内側で起きた方向の影響が、外側の文章へ漏れ出さないことです。
  24. 1:54逆に、外側の文章の方向が内側へ入り込むこともありません。
  25. 1:58つまりビーディーアイは、並び順を命令するのではなく、仕切りを作る要素です。
  26. 2:03記事でも、外から来た名前などの文字方向を周囲から独立させる、と説明されています。
  27. 2:09この控えめな働きが、方向の分からない文字列を安全に埋め込むための基本になります。
  28. 2:15基本の書き方を見ていきます。
  29. 2:17この教材では、開始タグと終了タグを明示して書きます。
  30. 2:21ビーディーアイは文章の途中の一部分を囲むインライン要素なので、段落を表すピータグの中などに置いて使います。
  31. 2:30囲むのは、投稿者名や商品名、検索キーワードなど、外部から受け取って表示する文字列の範囲だけに絞るのが基本です。
  32. 2:39自分で書いた通常の文章全体を囲む必要はありません。
  33. 2:43終了タグを書き忘れると、分離の範囲が意図せず広がってしまうので、タグの対応は必ず確認してください。
  34. 2:51また、ビーディーアイ自体は見た目を変える要素ではありません。
  35. 2:56太字になったり色が変わったりはしないので、装飾したい場合はシーエスエスを別に指定します。
  36. 3:04次に、ディーアイアール属性を確認します。
  37. 3:06ディーアイアールには、左から右を意味するエルティーアール、右から左を意味するアールティーエル、
  38. 3:11そして自動判定を意味するオートの三つの値があります。
  39. 3:16ビーディーアイでは、この属性を指定しなくても、オートを指定したのと同じ扱いになります。
  40. 3:22中の文字列を見て、ブラウザーが方向を判断してくれる設計だからです。
  41. 3:27これが、方向を言い切らなければならないビーディーオーとの大きな違いです。
  42. 3:32文字列の言語が確実に分かっている場合にだけ、エルティーアールやアールティーエルを明示しても構いませんが、
  43. 3:39分からないからこそビーディーアイを使う場面では、基本は省略、またはオートと覚えてください。
  44. 3:45むやみにアールティーエルを固定すると、かえって表示を崩す原因になります。
  45. 3:50前回扱ったビーディーオーとの違いを整理します。
  46. 3:54ビーディーアイは仕切りを作るだけです。
  47. 3:56中身の方向は自動判定に任せ、周囲との影響の行き来だけを断ちます。
  48. 4:01一方、ビーディーオーは自動判定そのものを上書きし、ディーアイアール属性で指定した方向へ強制的に並べ替えます。
  49. 4:09そのためビーディーオーではディーアイアールが必須で、エルティーアールかアールティーエルのどちらかを言い切らなければなりません。
  50. 4:18たとえるなら、ビーディーアイは部屋に間仕切りを置くこと、ビーディーオーは家具の並び順まで命令することです。
  51. 4:26実務では、まずビーディーアイで足りるかを考えてください。
  52. 4:30ユーザー入力の表示で必要なのは、ほとんどの場合、強制ではなく分離のほうです。
  53. 4:35記事の活用事例をもとに、コード例を確認します。
  54. 4:39場面は、投稿者名の後ろに投稿件数を続けて表示する一覧です。
  55. 4:44名前の部分をビーディーアイで囲み、その後ろに、ハイフンと三件の投稿という日本語の案内を続けています。
  56. 4:52スライドの例では名前を英字で書いていますが、実際にアラビア語の名前が入った場合を想像してください。
  57. 5:01ビーディーアイがないと、右から左へ読む名前の影響で、ハイフンや数字の位置が名前の反対側へ跳んでしまうことがあります。
  58. 5:10ビーディーアイで囲んでおけば、名前の中は名前の方向で、後ろの日本語は日本語の順序で、
  59. 5:15それぞれ正しく表示されます。
  60. 5:19練習では、練習用ファイルにこの例を書き、名前の部分だけ文字を変えて再読み込みし、
  61. 5:24表示を確認してみてください。
  62. 5:28ビーディーアイが役立つ場面は、名前表示だけではありません。
  63. 5:33コメント欄やレビューの投稿者名、ランキングやスコア表に並ぶ表示名、掲示板の引用文など、
  64. 5:38利用者が自由に入力した文字列を文章へ埋め込む場面すべてが対象です。
  65. 5:44多言語対応のストアで、現地語の商品名や地名を日本語の説明文へ差し込む場合も同じです。
  66. 5:50共通点は、表示するまで中身の言語や方向が分からない、ということです。
  67. 5:55逆に、開発者が自分で書いた見出しや本文は、言語が分かっているので、段落や文書全体にラング属性やディーアイアール属性を指定する従来の方法で十分です。
  68. 6:06外部由来の短い文字列を文中へ埋め込むとき、と覚えると使いどころを間違えません。
  69. 6:12安全面の注意も押さえてください。
  70. 6:14記事が明記しているとおり、ビーディーアイはクロスサイトスクリプティング、
  71. 6:18いわゆるエックスエスエスの対策ではありません。
  72. 6:23ビーディーアイはあくまで文字方向を分離する要素で、悪意のある文字列を無害化する働きは一切ありません。
  73. 6:30利用者が入力した文字列をページへ挿入するときは、ジャバスクリプトならテキストコンテンツを使って文字列として入れる、
  74. 6:37サーバー側ならエスケープ処理を行うなど、通常の安全な挿入方法を必ず守ってください。
  75. 6:43入力値をそのままエイチティーエムエルとして流し込むと、ビーディーアイで囲んでいても、
  76. 6:48スクリプトやタグが実行される危険は変わりません。
  77. 6:53分離と無害化は別の話、と切り分けて覚えておきましょう。
  78. 6:57ブラウザー互換性を確認します。
  79. 6:59記事が紹介するエムディーエヌのデータでは、ビーディーアイ要素本体は、クロームが十六以降、
  80. 7:04ファイアフォックスが十以降、サファリが六以降から対応しています。
  81. 7:09エッジについては共通エンジンのデータを参照する形ですが、現在のエッジはクロームと同じエンジンを採用しているため、
  82. 7:14問題なく使えます。
  83. 7:19いずれも十年以上前のバージョンから使えることが分かり、現在の主要ブラウザーでは互換性を心配する必要はほぼありません。
  84. 7:27ただし記事も注意しているように、この表は要素本体の対応開始版を示すものです。
  85. 7:32スマートフォンのブラウザーなど、利用対象の環境では、実際にアラビア語などの文字列を入れて表示を試しておくと安心です。
  86. 7:40まとめとして、よくある間違いを三つ挙げます。
  87. 7:44一つ目は、自分で書いた文章まで全部ビーディーアイで囲んでしまうことです。
  88. 7:50分離は外部由来の文字列に絞るからこそ意味があります。
  89. 7:54二つ目は、ディーアイアール属性にアールティーエルを固定してしまうことです。
  90. 8:00方向が分からない文字列こそ、オートの自動判定に任せてください。
  91. 8:05三つ目は、見た目が変わらないからとスパン要素で済ませてしまうことです。
  92. 8:10スパンには方向を分離する働きがないため、記号の跳ぶ問題は解決しません。
  93. 8:16ビーディーアイは、方向の分からない文字列を周囲から独立させる、小さいけれど国際化には欠かせない要素です。
  94. 8:25これでビーディーアイタグの解説を終わります。
  95. 8:28まずは記事の例で、名前を変えたときの表示を実際に試してみてください。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

bdiタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。外から来た名前などの文字方向を、周囲から独立させます。

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