WEBVTT

1
00:00:00.000 --> 00:00:00.859
こんにちは。

2
00:00:00.859 --> 00:00:03.864
エイチティーエムエルリファレンス解説です。

3
00:00:03.864 --> 00:00:08.444
エイチティーエムエルタグ編の百三本目は、ビーディーオータグです。

4
00:00:08.444 --> 00:00:15.599
ビーディーオーは、文字が並ぶ方向を、ブラウザーの自動判定に任せず、明示的に上書きするための要素です。

5
00:00:15.599 --> 00:00:21.324
日本語や英語は左から右へ読みますが、アラビア語やヘブライ語は右から左へ読みます。

6
00:00:21.324 --> 00:00:25.474
異なる方向の文字が混ざると、表示順が崩れることがあります。

7
00:00:25.474 --> 00:00:30.984
今回は、ビーディーオーの意味、ディーアイアール属性の使い方、ビーディーアイとの違い、

8
00:00:30.984 --> 00:00:36.494
コード例、ブラウザー互換性、そしてよくある間違いまで順番に確認します。

9
00:00:36.494 --> 00:00:41.932
普段は出番の少ない、けれど知っておくと文字表示の仕組みがよく分かる要素です。

10
00:00:41.932 --> 00:00:44.975
まず、ビーディーオーの役割を整理します。

11
00:00:44.975 --> 00:00:54.560
ブラウザーはふだん、ユニコードの双方向アルゴリズムと呼ばれるルールで、文字ごとにどちらの方向へ並べるかを自動で判断しています。

12
00:00:54.560 --> 00:00:58.744
日本語の文章に英数字やアラビア語が少し混ざっても、多くの場合は自然に表示されるのは、

13
00:00:58.744 --> 00:01:02.928
この自動判定のおかげです。

14
00:01:02.928 --> 00:01:10.231
ビーディーオーは、その自動判定をあえて止めて、囲んだ範囲の方向を開発者が言い切るための要素です。

15
00:01:10.231 --> 00:01:15.861
つまり、表示順をブラウザー任せにせず、こちらで決める、という強い指定です。

16
00:01:15.861 --> 00:01:21.034
そのため記事でも、通常の文章では必要ありません、と強調されています。

17
00:01:21.034 --> 00:01:27.272
本当に順序を固定しなければならない、限られた場面でだけ使う要素だと覚えてください。

18
00:01:27.272 --> 00:01:29.692
基本の書き方を見ていきます。

19
00:01:29.692 --> 00:01:34.187
この教材では、開始タグと終了タグを明示して書きます。

20
00:01:34.187 --> 00:01:43.349
ビーディーオーは文章の途中の一部分を囲むインライン要素なので、段落を表すピータグの中などに置いて使います。

21
00:01:43.349 --> 00:01:48.362
囲む範囲は、方向を固定したい文字列だけに絞るのが基本です。

22
00:01:48.362 --> 00:01:52.683
段落全体やページ全体を囲むような使い方はしません。

23
00:01:52.683 --> 00:01:57.178
なぜなら、広い範囲を上書きすると、句読点や記号の位置まで意図せず変わり、

24
00:01:57.178 --> 00:02:01.672
かえって読みにくくなるからです。

25
00:02:01.672 --> 00:02:06.513
まずは、短い文字列をピンポイントで囲む形を覚えましょう。

26
00:02:06.513 --> 00:02:15.156
終了タグを書き忘れると、その後の文章まで方向が変わってしまうので、タグの対応は必ず確認してください。

27
00:02:15.156 --> 00:02:18.807
次に、最も重要なディーアイアール属性を確認します。

28
00:02:18.807 --> 00:02:22.167
ビーディーオーでは、この属性の指定が必須です。

29
00:02:22.167 --> 00:02:28.155
方向を上書きする要素なのに、どちらの方向かを示さなければ意味が決まらないからです。

30
00:02:28.155 --> 00:02:29.470
値は二つだけです。

31
00:02:29.470 --> 00:02:34.728
エルティーアールはレフト・トゥ・ライト、つまり左から右へ並べる指定です。

32
00:02:34.728 --> 00:02:42.907
アールティーエルはライト・トゥ・レフト、つまり右から左へ並べる指定で、この場合は文字の並びが逆順に表示されます。

33
00:02:42.907 --> 00:02:49.626
一般の要素では、自動判定を意味するオートという値も選べますが、ビーディーオーでは使いません。

34
00:02:49.626 --> 00:02:55.030
上書きする以上、方向は開発者が明確に決める、というのがこの要素の約束です。

35
00:02:55.030 --> 00:02:59.704
値を書き忘れたり、つづりを間違えたりすると、上書きは働きません。

36
00:02:59.704 --> 00:03:04.080
似た名前のビーディーアイタグとの違いを押さえましょう。

37
00:03:04.080 --> 00:03:12.184
ビーディーアイは、ユーザー名など、外から来た文字列の方向を、周囲の文章から独立させるための要素です。

38
00:03:12.184 --> 00:03:18.180
中の文字の方向は自動判定に任せつつ、周囲へ影響が漏れないように区切ります。

39
00:03:18.180 --> 00:03:25.150
一方、ビーディーオーは、自動判定そのものを上書きして、方向を強制的に決めてしまいます。

40
00:03:25.150 --> 00:03:29.201
たとえるなら、ビーディーアイは仕切りを作るだけ、ビーディーオーは並び順まで命令する、

41
00:03:29.201 --> 00:03:33.253
という違いです。

42
00:03:33.253 --> 00:03:40.709
実務では、まず言語を示すラング属性や、通常のディーアイアール属性、そしてビーディーアイで足りるかを考え、

43
00:03:40.709 --> 00:03:48.164
それでも表示順を固定しなければならないときだけ、ビーディーオーを選んでください。

44
00:03:48.164 --> 00:03:51.726
記事の活用事例をもとに、コード例を確認します。

45
00:03:51.726 --> 00:03:56.526
ピータグの中に、ディーアイアール属性にアールティーエルを指定したビーディーオーを書き、

46
00:03:56.526 --> 00:04:01.326
中にエービーシーと数字を入れています。

47
00:04:01.326 --> 00:04:07.985
これをブラウザーで表示すると、文字の並びが逆になり、数字と英字が反対の順序で現れます。

48
00:04:07.985 --> 00:04:15.418
もとの文字列そのものが書き換わるわけではなく、見た目の並ぶ方向だけが変わる点に注目してください。

49
00:04:15.418 --> 00:04:22.541
練習では、エイチティーエムエル入門で作った練習用ファイルをコピーし、エルティーアールとアールティーエルを書き換えて再読み込みし、

50
00:04:22.541 --> 00:04:29.664
表示がどう変わるかを自分の目で比べると理解が深まります。

51
00:04:29.664 --> 00:04:34.464
開発者ツールのエレメンツでも、属性の値を確認してみてください。

52
00:04:34.464 --> 00:04:37.778
では、実際にどんな場面で使うのでしょうか。

53
00:04:37.778 --> 00:04:49.455
代表的なのは、多言語サイトで、右から左へ書く言語の表示を確認したり、自動判定ではどうしても意図どおりにならない文字列の順序を保証したりする場面です。

54
00:04:49.455 --> 00:04:58.764
たとえば、方向の異なる文字が混ざった型番や識別コードなどで、表示順が変わると意味まで変わってしまう場合が考えられます。

55
00:04:58.764 --> 00:05:06.654
また、文字方向の学習や、ブラウザーの表示違いを検証する教材でも、違いを意図的に作るために使われます。

56
00:05:06.654 --> 00:05:10.836
逆に、日本語だけの通常の記事や、見た目を面白くするために文字を逆向きにしたい、

57
00:05:10.836 --> 00:05:15.017
といった目的では使いません。

58
00:05:15.017 --> 00:05:22.276
必要になる場面は限られますが、その限られた場面では、他の方法では代わりが利きにくい要素です。

59
00:05:22.276 --> 00:05:25.038
シーエスエスとの関係も知っておきましょう。

60
00:05:25.038 --> 00:05:34.244
シーエスエスには、文字の並び方向を指定するディレクションプロパティと、双方向の扱いを指定するユニコード・バイダイというプロパティがあります。

61
00:05:34.244 --> 00:05:39.044
ビーディーオーの上書きは、このユニコード・バイダイのバイダイ・オーバーライドに相当する振る舞いを、

62
00:05:39.044 --> 00:05:43.844
エイチティーエムエルの意味として表したものです。

63
00:05:43.844 --> 00:05:49.499
単にレイアウト上の見た目を調整したいだけなら、シーエスエスで十分な場合も多くあります。

64
00:05:49.499 --> 00:05:53.510
ただし、その文字列の方向自体が内容の意味に関わるなら、スタイルを外しても意味が残るよう、

65
00:05:53.510 --> 00:05:57.521
ビーディーオーで示す方が適切です。

66
00:05:57.521 --> 00:06:03.176
意味はエイチティーエムエル、装飾や配置はシーエスエス、という分担は、ここでも同じです。

67
00:06:03.176 --> 00:06:05.174
ブラウザー互換性を確認します。

68
00:06:05.174 --> 00:06:10.836
記事が紹介するエムディーエヌのデータでは、ビーディーオー要素本体は、クロームが十五以前、

69
00:06:10.836 --> 00:06:16.498
エッジが十二以降、ファイアフォックスが十以降、サファリが四以前から対応しています。

70
00:06:16.498 --> 00:06:20.229
いずれもかなり古いバージョンから使えることが分かります。

71
00:06:20.229 --> 00:06:28.222
エイチティーエムエルの中でも長く安定している機能の一つで、現在の主要ブラウザーでは互換性を心配する必要はほぼありません。

72
00:06:28.222 --> 00:06:31.553
スマートフォンのブラウザーでも同様に表示できます。

73
00:06:31.553 --> 00:06:35.416
ただし、対応していることと、正しく使えていることは別です。

74
00:06:35.416 --> 00:06:39.746
対応状況よりも、方向を上書きする必要が本当にあるか、読み上げで内容が正しく伝わるか、

75
00:06:39.746 --> 00:06:44.076
といった使い方そのものに注意を向けてください。

76
00:06:44.076 --> 00:06:46.952
実装前後のチェック項目を確認します。

77
00:06:46.952 --> 00:06:54.621
まず、その文字列に本当に方向の上書きが必要か、タグありきではなく内容の意味から判断してください。

78
00:06:54.621 --> 00:07:01.812
ラング属性や通常のディーアイアール属性、ビーディーアイで解決するなら、そちらを優先します。

79
00:07:01.812 --> 00:07:12.197
次に、見た目の並びだけでなく、読み上げソフトでの読み上げ順や、文字列をコピーしたときの順序が意図と合っているかも確かめてください。

80
00:07:12.197 --> 00:07:19.547
ビーディーオーは見た目の順序を変えるため、支援技術の利用者を混乱させない配慮が欠かせません。

81
00:07:19.547 --> 00:07:27.057
さらに、三百二十ピクセル程度の画面幅や文字拡大時にも、内容が欠けずに読めるかを試してください。

82
00:07:27.057 --> 00:07:33.448
公開前に、前後の文章を含めて声に出して読み、意味が通じるかを確認すると安心です。

83
00:07:33.448 --> 00:07:36.990
まとめとして、よくある間違いを三つ挙げます。

84
00:07:36.990 --> 00:07:41.176
一つ目は、ディーアイアール属性を書き忘れることです。

85
00:07:41.176 --> 00:07:46.812
ビーディーオーでは必須の属性なので、忘れると方向の上書きは働きません。

86
00:07:46.812 --> 00:07:53.574
二つ目は、見た目の面白さだけを目的に、通常の日本語や英語を逆順にしてしまうことです。

87
00:07:53.574 --> 00:07:59.209
読みにくくなるだけでなく、読み上げや検索でも意図が伝わらなくなります。

88
00:07:59.209 --> 00:08:03.396
三つ目は、段落全体や長い文章に使ってしまうことです。

89
00:08:03.396 --> 00:08:08.870
上書きは、順序を固定しなければならない短い範囲だけに絞ってください。

90
00:08:08.870 --> 00:08:15.632
ビーディーオーは、文字方向を明示的に上書きする、限定的だからこそ意味のある要素です。

91
00:08:15.632 --> 00:08:19.175
これでビーディーオータグの解説を終わります。

92
00:08:19.175 --> 00:08:26.420
まずは記事の例で、エルティーアールとアールティーエルの表示違いを実際に試してみてください。