WEBVTT

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

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

3
00:00:04.066 --> 00:00:07.697
HTMLタグ編の三十六本目は、アールピータグです。

4
00:00:07.697 --> 00:00:14.232
前々回のルビ、前回のアールティーに続いて、ルビの仕組みを支える三つ目のタグを取り上げます。

5
00:00:14.232 --> 00:00:22.945
アールピーの役割は少し特殊で、ルビ表示に対応していない環境のために、読みを囲む括弧などをあらかじめ用意しておくことです。

6
00:00:22.945 --> 00:00:27.737
普段、対応ブラウザーでは姿を見せない、いわば保険のようなタグです。

7
00:00:27.737 --> 00:00:32.820
地味ですが、どんな環境でも読みを正しく伝えるための、大切な仕掛けです。

8
00:00:32.820 --> 00:00:37.612
今回は、その見えない働きを、表示の仕組みから順に確かめていきます。

9
00:00:37.612 --> 00:00:41.553
どんな場面で必要になるのか、考えてみましょう。

10
00:00:41.553 --> 00:00:48.578
ルビに対応したブラウザーでは、読みは本文の上に小さく表示され、本文と区別できます。

11
00:00:48.578 --> 00:00:55.089
ところが対応していない環境では、読みが本文の直後にそのまま並んでしまいます。

12
00:00:55.089 --> 00:01:02.629
たとえば、属性、ぞくせい、と続くと、どこまでが本文で、どこからが読みなのか分かりません。

13
00:01:02.629 --> 00:01:07.341
そこで括弧で区切れば、属性かっこ、ぞくせい、かっことじ、という形になり、

14
00:01:07.341 --> 00:01:12.053
初めての人でも読みの範囲が分かります。

15
00:01:12.053 --> 00:01:18.221
文章をテキストとして取り出して読む場合にも、この区切りが助けになります。

16
00:01:18.221 --> 00:01:22.591
特に人名や専門用語では、読みを取り違えると意味まで変わることがあるため、

17
00:01:22.591 --> 00:01:26.960
区切りの有無が大切になります。

18
00:01:26.960 --> 00:01:29.429
基本の書き方を確認します。

19
00:01:29.429 --> 00:01:36.458
スライドの例では、属性、という本文に、ぞくせい、という読みを付けています。

20
00:01:36.458 --> 00:01:41.397
構造は、まず外側をルビで囲み、本文の属性を書きます。

21
00:01:41.397 --> 00:01:51.274
次にアールピーで開き括弧を置き、アールティーに読みを入れ、最後にもう一度アールピーで閉じ括弧を置きます。

22
00:01:51.274 --> 00:01:57.353
ポイントは、アールピーを読みの前後に一つずつ、対で使うことです。

23
00:01:57.353 --> 00:02:07.990
括弧の種類は丸括弧が一般的ですが、内容は丸括弧そのものではなく、アールピーの中身として書く点に注意してください。

24
00:02:07.990 --> 00:02:17.868
書いたあとは、タグの入れ子の順番が崩れていないかを、最初と最後から一組ずつ目で追って確認すると安心です。

25
00:02:17.868 --> 00:02:19.681
表示の仕組みを整理します。

26
00:02:19.681 --> 00:02:24.144
ルビに対応したブラウザーでは、アールピーの中身は表示されません。

27
00:02:24.144 --> 00:02:28.189
読みは本文の上に小さく出るので、括弧は邪魔になるからです。

28
00:02:28.189 --> 00:02:32.094
一方、対応していない環境では、アールピーの中身がそのまま表示され、本文、

29
00:02:32.094 --> 00:02:35.999
括弧、読み、括弧の順に横並びになります。

30
00:02:35.999 --> 00:02:42.694
つまり、書き手は一つのエイチティーエムエルを用意するだけで、二つの表示に自動で対応できるのです。

31
00:02:42.694 --> 00:02:45.762
環境ごとに別のページを作る必要はありません。

32
00:02:45.762 --> 00:02:49.807
この切り替えはブラウザーが行うため、特別な設定は不要です。

33
00:02:49.807 --> 00:02:53.363
画面に映らない間も、アールピーの情報はエイチティーエムエルの中に残っていて、

34
00:02:53.363 --> 00:02:56.920
必要な環境でだけ働きます。

35
00:02:56.920 --> 00:02:59.021
次に、文章の中で使う例です。

36
00:02:59.021 --> 00:03:05.172
スライドでは、段落の中で、相対、という言葉に、そうたい、という読みを付けています。

37
00:03:05.172 --> 00:03:09.298
書き方は単独のときとまったく同じで、ルビの中に本文、アールピー、アールティー、

38
00:03:09.298 --> 00:03:13.424
アールピーの順で並べるだけです。

39
00:03:13.424 --> 00:03:19.726
文中のすべての漢字に付ける必要はなく、読みにくい言葉に絞るのが読みやすさのコツです。

40
00:03:19.726 --> 00:03:26.478
段落の中で使うときは、前後の文章とのつながりも含めて、公開前に通して読んで確認しましょう。

41
00:03:26.478 --> 00:03:30.229
このように、本文の邪魔をせずに、必要な言葉へだけ小さな手がかりを添えられるのが、

42
00:03:30.229 --> 00:03:33.980
ルビ一式の良さです。

43
00:03:33.980 --> 00:03:37.231
アールピーを省いた場合とも比べてみましょう。

44
00:03:37.231 --> 00:03:43.288
上の例のようにアールピーがなくても、対応ブラウザーでは問題なくルビが表示されます。

45
00:03:43.288 --> 00:03:49.346
今の主要ブラウザーはほぼ対応しているため、実務でも省略されることが多い書き方です。

46
00:03:49.346 --> 00:03:55.404
ただし、非対応の環境では括弧の区切りがなくなり、本文と読みがつながってしまいます。

47
00:03:55.404 --> 00:04:00.132
下の例のようにアールピーを付けておけば、その心配がなくなります。

48
00:04:00.132 --> 00:04:06.042
手間は少し増えますが、読み手を広く想定するページでは、付けておく価値があります。

49
00:04:06.042 --> 00:04:11.952
公的な案内や教材のように、読む環境を選べない文章ほど、この一手間が効いてきます。

50
00:04:11.952 --> 00:04:13.955
属性について整理します。

51
00:04:13.955 --> 00:04:17.960
アールピーには、このタグ専用の属性はありません。

52
00:04:17.960 --> 00:04:23.134
括弧の文字は属性ではなく、アールピーの中身として直接書きます。

53
00:04:23.134 --> 00:04:28.141
必要に応じて、すべての要素で使えるグローバル属性を使います。

54
00:04:28.141 --> 00:04:33.816
アイディーは文書の中で一つだけの識別子、クラスはシーエスエスやスクリプトでまとめて選ぶための名前、

55
00:04:33.816 --> 00:04:39.490
ラングはその部分の言語を示す指定です。

56
00:04:39.490 --> 00:04:43.496
ほかに、独自の値を保持するデータ属性もあります。

57
00:04:43.496 --> 00:04:50.673
ただし、アールピーを装飾の対象にすることはほとんどなく、属性を付ける場面も限られます。

58
00:04:50.673 --> 00:04:58.684
指定する位置で迷ったら、括弧を変えたいのか、読み全体を変えたいのかを分けて考えると失敗しません。

59
00:04:58.684 --> 00:05:01.119
見た目についても触れておきます。

60
00:05:01.119 --> 00:05:07.512
アールピーは、対応ブラウザーではブラウザー側の標準ルールで自動的に非表示になります。

61
00:05:07.512 --> 00:05:12.688
そのため、書き手がシーエスエスで隠す指定を書く必要は通常ありません。

62
00:05:12.688 --> 00:05:19.994
逆に、無理に表示させるような指定をすると、対応環境で括弧が二重に出るなどの不具合につながります。

63
00:05:19.994 --> 00:05:26.691
読みの大きさを調整したいときは、スライドのようにアールティー側の文字サイズを変更します。

64
00:05:26.691 --> 00:05:33.998
アールピーは、見た目を作るタグではなく、表示できない環境への橋渡しをするタグだと覚えてください。

65
00:05:33.998 --> 00:05:41.456
大きさや色を全体で統一したい場合も、ルビ全体へまとめて指定する方が、読みの対応がずれずに済みます。

66
00:05:41.456 --> 00:05:43.415
ブラウザー互換性を確認します。

67
00:05:43.415 --> 00:05:47.986
記事が参照するエムディーエヌの記録では、アールピーを含むルビの仕組みは、

68
00:05:47.986 --> 00:05:52.556
クロームがバージョン五以降、エッジが十二以降、ファイアフォックスが三十八以降、

69
00:05:52.556 --> 00:05:57.127
サファリが五以降と、主要ブラウザーで古くから対応しています。

70
00:05:57.127 --> 00:06:01.828
そのため今の環境では、アールピーの括弧が画面に出ないのが正常な動作です。

71
00:06:01.828 --> 00:06:06.268
画面に括弧が見えないからといって、書き間違いを疑う必要はありません。

72
00:06:06.268 --> 00:06:10.186
確認したいときは、開発者ツールでエイチティーエムエルの構造そのものを見て、

73
00:06:10.186 --> 00:06:14.104
アールピーが正しく入っているか確かめましょう。

74
00:06:14.104 --> 00:06:21.156
スマートフォン側のブラウザーでも基本の考え方は同じですので、対象の実機で一度だけ流れを確認しておきましょう。

75
00:06:21.156 --> 00:06:23.264
実装時の注意点をまとめます。

76
00:06:23.264 --> 00:06:25.371
一つ目、二重括弧の防止です。

77
00:06:25.371 --> 00:06:32.297
括弧はアールピーの中だけに書き、本文やアールティーの中に同じ括弧を重ねて入れないでください。

78
00:06:32.297 --> 00:06:35.308
非対応環境で括弧が二つ並んでしまいます。

79
00:06:35.308 --> 00:06:39.072
二つ目、開き括弧と閉じ括弧は必ず対で書くことです。

80
00:06:39.072 --> 00:06:42.384
片方だけでは、区切りとして不完全になります。

81
00:06:42.384 --> 00:06:47.653
三つ目、アールピーは必ずルビの内側、アールティーの前後に置くことです。

82
00:06:47.653 --> 00:06:50.815
ルビの外に単独で置いても意味を持ちません。

83
00:06:50.815 --> 00:06:56.987
最後に、三百二十ピクセル程度の狭い画面でも、本文と読みが欠けないか確認しましょう。

84
00:06:56.987 --> 00:07:04.816
特に、ほかの例文をコピーして書き換える場合は、括弧だけが前の言葉のまま残っていないかを見直してください。

85
00:07:04.816 --> 00:07:06.727
最後に練習とまとめです。

86
00:07:06.727 --> 00:07:13.254
アールピーは、ルビを表示できない環境のために、読みを囲む括弧などを置くタグでした。

87
00:07:13.254 --> 00:07:15.324
大切なポイントは三つです。

88
00:07:15.324 --> 00:07:20.418
一つ目、アールティーの前後に、開き括弧と閉じ括弧を対で置くこと。

89
00:07:20.418 --> 00:07:25.035
二つ目、括弧はアールピーの中だけに書き、二重にしないこと。

90
00:07:25.035 --> 00:07:30.767
三つ目、対応ブラウザーでは見えないのが正常な動作だと知っておくことです。

91
00:07:30.767 --> 00:07:38.727
練習として、前回の復習も兼ねて、ルビ、アールピー、アールティーの三点セットで一つ書いてみてください。

92
00:07:38.727 --> 00:07:40.160
お疲れさまでした。

93
00:07:40.160 --> 00:07:42.548
次回はキュータグを解説します。

94
00:07:42.548 --> 00:07:49.076
小さなタグですが、見えないところで読み手を支える、思いやりの設計が詰まっています。