WEBVTT

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

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

3
00:00:04.156 --> 00:00:08.015
HTMLタグ編の三十五本目は、アールティータグです。

4
00:00:08.015 --> 00:00:12.616
前回扱ったルビは、本文と読み仮名の組全体をまとめるタグでした。

5
00:00:12.616 --> 00:00:17.366
今回のアールティーは、その内側で読み仮名そのものを書く場所です。

6
00:00:17.366 --> 00:00:20.632
小さなタグですが、役割ははっきりしています。

7
00:00:20.632 --> 00:00:27.756
本文はルビの中に直接書き、読みだけをアールティーで囲む、この分担を覚えることが今回の出発点です。

8
00:00:27.756 --> 00:00:32.209
読みが正しく伝わるかどうかは、このタグの書き方で決まります。

9
00:00:32.209 --> 00:00:38.740
今回の主役は読みの部分ですので、本文側のルビの復習も兼ねながら、ゆっくり進めていきます。

10
00:00:38.740 --> 00:00:42.957
どんな場面でアールティーが活躍するか見ていきましょう。

11
00:00:42.957 --> 00:00:48.893
読み方が分かりにくい漢字や専門用語は、知らない人にとって大きな壁になります。

12
00:00:48.893 --> 00:00:54.204
人名や地名のような固有名詞も、見た目だけでは読み方を判断できません。

13
00:00:54.204 --> 00:01:00.608
そんなとき、本文の上に小さく読みを示せば、読み手は辞書を引かずに読み進められます。

14
00:01:00.608 --> 00:01:03.420
教材や子ども向けの文章でも同じです。

15
00:01:03.420 --> 00:01:07.949
逆に、誰でも読める言葉にまで読みを付ける必要はありません。

16
00:01:07.949 --> 00:01:10.761
本当に迷う言葉に絞ることが大切です。

17
00:01:10.761 --> 00:01:19.352
たとえば観光案内や学校の配布物など、不特定多数の人が読むページでは、読みの有無が理解の速さを大きく左右します。

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

19
00:01:21.745 --> 00:01:28.005
記事の例では、余白、という本文に、よはく、という読みを付けています。

20
00:01:28.005 --> 00:01:30.951
書き方は三つの部分に分かれます。

21
00:01:30.951 --> 00:01:35.922
まず外側をルビで囲み、次に本文の余白をそのまま書き、最後にアールティーの中に読みの、

22
00:01:35.922 --> 00:01:40.893
よはく、だけを入れます。

23
00:01:40.893 --> 00:01:46.232
ブラウザーでは、余白の上に小さく、よはく、と表示されます。

24
00:01:46.232 --> 00:01:52.307
アールティーは単独では使わず、必ずルビの内側に置くのが決まりです。

25
00:01:52.307 --> 00:01:56.910
段落の中に置けば、文章の流れの中で自然に使えます。

26
00:01:56.910 --> 00:02:06.852
終了タグの閉じ忘れがあると、その後の文章まで影響することがあるので、タグの組は必ずセットで確認してください。

27
00:02:06.852 --> 00:02:11.171
ここで、初心者が間違えやすい決まりを整理します。

28
00:02:11.171 --> 00:02:15.311
一つ目、アールティーはルビの中でだけ使います。

29
00:02:15.311 --> 00:02:20.710
ルビの外に単独で置いても、読みとしての意味は成り立ちません。

30
00:02:20.710 --> 00:02:24.309
二つ目、本文と読みを逆にしないことです。

31
00:02:24.309 --> 00:02:30.428
本文をアールティーへ入れて、読みを外側に置くような書き方は誤りです。

32
00:02:30.428 --> 00:02:34.747
アールティーの中身は、あくまで読み仮名だけです。

33
00:02:34.747 --> 00:02:38.707
三つ目、読みは対応する本文の直後に置きます。

34
00:02:38.707 --> 00:02:46.626
本文と読みの対応がずれると、読み手が混乱してしまうので、書き終えたら必ず見直しましょう。

35
00:02:46.626 --> 00:02:51.485
ブラウザーが自動で直してくれる場合もありますが、正しい構造で書くことが、

36
00:02:51.485 --> 00:02:56.344
どの環境でも同じ表示にする近道です。

37
00:02:56.344 --> 00:02:58.795
次に、複数の読みを付ける例です。

38
00:02:58.795 --> 00:03:03.236
一つのルビの中には、アールティーを複数置くこともできます。

39
00:03:03.236 --> 00:03:10.588
スライドの例では、東京に、とうきょう、駅に、えき、という読みを、それぞれ分けて対応させています。

40
00:03:10.588 --> 00:03:17.480
このように言葉の区切りごとに分けると、どの文字にどの読みが付いているのかが明確になります。

41
00:03:17.480 --> 00:03:22.075
一方、熟語全体に一つの読みをまとめて付ける書き方もあります。

42
00:03:22.075 --> 00:03:28.814
どちらの場合も、意味の区切りと読みの対応をそろえることが、読みやすさの決め手になります。

43
00:03:28.814 --> 00:03:36.932
分けて書く方法は、読みの学習を助ける教材や、振り仮名を細かく付けたい子ども向けのページでもよく使われます。

44
00:03:36.932 --> 00:03:41.039
アールピーと組み合わせる書き方も確認しておきましょう。

45
00:03:41.039 --> 00:03:47.579
アールピーは、ルビ表示に対応していない環境のために、読みを囲む括弧などを置く場所です。

46
00:03:47.579 --> 00:03:53.815
スライドの例では、アールティーの読みの前後に、アールピーで丸括弧を用意しています。

47
00:03:53.815 --> 00:03:59.443
対応しているブラウザーでは括弧は表示されず、読みは本文の上に小さく出ます。

48
00:03:59.443 --> 00:04:05.679
対応していない環境では、本文の直後に括弧付きで読みが並ぶので、意味が失われません。

49
00:04:05.679 --> 00:04:11.763
今の主要ブラウザーはほぼ対応していますが、丁寧な書き方として覚えておきましょう。

50
00:04:11.763 --> 00:04:19.824
アールピーを省略しても今のブラウザーでは問題ありませんが、書いておくことで古い環境への配慮が形になります。

51
00:04:19.824 --> 00:04:21.664
属性について整理します。

52
00:04:21.664 --> 00:04:25.498
アールティーには、このタグ専用の属性はありません。

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

54
00:04:30.098 --> 00:04:37.458
アイディーは文書の中で一つだけの識別子で、ページ内リンクやジャバスクリプトからの参照に使います。

55
00:04:37.458 --> 00:04:43.285
クラスは、シーエスエスやスクリプトで複数の要素をまとめて選ぶための名前です。

56
00:04:43.285 --> 00:04:48.192
ラングはその部分の言語を示し、日本語ならジェイエーを指定します。

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

58
00:04:51.872 --> 00:04:56.472
読みそのものは属性ではなく、アールティーの中身で決まります。

59
00:04:56.472 --> 00:05:00.842
子要素に指定する属性と混同しないように、属性はアールティー自身に付けるのか、

60
00:05:00.842 --> 00:05:05.212
ルビ全体に付けるのかも確認しましょう。

61
00:05:05.212 --> 00:05:07.469
見た目についても触れておきます。

62
00:05:07.469 --> 00:05:12.831
標準では、アールティーの読みは本文の上に、本文より小さい文字で表示されます。

63
00:05:12.831 --> 00:05:16.923
この大きさは、スライドのようにシーエスエスで調整できます。

64
00:05:16.923 --> 00:05:22.566
アールティーにフォントサイズを指定すれば読みの大きさが変わり、色も変更できます。

65
00:05:22.566 --> 00:05:28.351
ただし、読みを小さくしすぎると、せっかく付けた読み自体が読めなくなってしまいます。

66
00:05:28.351 --> 00:05:35.406
文字を拡大して見る人や、スマートフォンで読む人のことも考えて、読みやすさを優先して調整してください。

67
00:05:35.406 --> 00:05:40.626
見た目の変更はシーエスエス、意味の指定はタグ、と分けて考えるのが基本です。

68
00:05:40.626 --> 00:05:48.104
色を変える場合も、本文との区別がつく程度にとどめ、読みが本文より目立ちすぎないようバランスを取りましょう。

69
00:05:48.104 --> 00:05:50.384
ブラウザー互換性を確認します。

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

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

72
00:06:01.327 --> 00:06:06.798
サファリが五以降と、主要ブラウザーで古くから広く対応しています。

73
00:06:06.798 --> 00:06:09.078
安心して使えるタグの一つです。

74
00:06:09.078 --> 00:06:16.981
ただし、これは要素本体の対応状況で、読みの細かい表示位置など、シーエスエス側の対応は別に確認が必要です。

75
00:06:16.981 --> 00:06:21.693
大切なページでは、対象の端末でも一度表示を確かめると安心です。

76
00:06:21.693 --> 00:06:29.292
対応開始の時期が古いということは、それだけ長く使われてきた、安定した仕組みだということでもあります。

77
00:06:29.292 --> 00:06:32.534
実装前後のチェックポイントをまとめます。

78
00:06:32.534 --> 00:06:34.966
一つ目、本文と読みの対応です。

79
00:06:34.966 --> 00:06:40.478
どの文字にどの読みが付いているか、書き終えたら必ず見直してください。

80
00:06:40.478 --> 00:06:42.909
二つ目、読み自体の正確さです。

81
00:06:42.909 --> 00:06:48.746
人名や地名は読み間違いが多いので、公式な表記で確認してから書きましょう。

82
00:06:48.746 --> 00:06:53.123
間違った読みを付けるくらいなら、付けない方がましです。

83
00:06:53.123 --> 00:06:55.068
三つ目は表示の確認です。

84
00:06:55.068 --> 00:07:03.498
三百二十ピクセル程度の狭い画面や、文字を拡大したときにも、本文と読みの両方が欠けずに読めるか確かめます。

85
00:07:03.498 --> 00:07:08.848
公開前に一度声に出して読んでみるのも、間違いに気づく良い方法です。

86
00:07:08.848 --> 00:07:18.088
ルビを含むページでは、文字だけを拡大して読む人のことも考え、行間が詰まりすぎていないかもあわせて見ておきましょう。

87
00:07:18.088 --> 00:07:19.973
最後に練習とまとめです。

88
00:07:19.973 --> 00:07:24.373
アールティーは、ルビの中で読み仮名を記述するタグでした。

89
00:07:24.373 --> 00:07:26.415
大切なポイントは三つです。

90
00:07:26.415 --> 00:07:31.443
一つ目、アールティーの中身は読みだけにし、本文と逆にしないこと。

91
00:07:31.443 --> 00:07:35.842
二つ目、必ずルビの内側で、対応する本文の直後に置くこと。

92
00:07:35.842 --> 00:07:41.184
三つ目、言葉の区切りと読みの対応をそろえ、正確な読みを書くことです。

93
00:07:41.184 --> 00:07:49.511
練習として、自分の名前や駅名など、読みにくい身近な言葉で、ルビとアールティーの組を一つ書いてみてください。

94
00:07:49.511 --> 00:07:50.925
お疲れさまでした。

95
00:07:50.925 --> 00:07:53.596
次回はアールピータグを解説します。

96
00:07:53.596 --> 00:08:00.980
小さなタグですが、正しく使えば読み手のつまずきを一つ減らせる、思いやりのあるタグだと言えます。