WEBVTT

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

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

3
00:00:04.323 --> 00:00:07.720
HTMLタグ編の三十四本目は、ルビタグです。

4
00:00:07.720 --> 00:00:13.433
ルビとは、漢字などの本文の上に、小さな文字で読み方を示す仕組みのことです。

5
00:00:13.433 --> 00:00:20.535
教科書やニュースサイトで、難しい漢字の上にフリガナが付いているのを見たことがあると思います。

6
00:00:20.535 --> 00:00:24.703
このルビでは、本文と読み仮名をひと組としてまとめます。

7
00:00:24.703 --> 00:00:31.497
今回は、パートナーとなるアールティーとアールピーも一緒に、初心者向けに順番に解説します。

8
00:00:31.497 --> 00:00:38.908
漢字が読めないと文章の理解そのものが止まってしまうので、この小さな工夫が読み手の助けになります。

9
00:00:38.908 --> 00:00:42.506
では、どんな場面で使うのか見ていきましょう。

10
00:00:42.506 --> 00:00:46.103
代表的なのは、読み方が分かりにくい言葉です。

11
00:00:46.103 --> 00:00:53.462
難しい漢字が続く専門用語、人名や地名のような固有名詞は、知らないと読み間違えてしまいます。

12
00:00:53.462 --> 00:00:58.204
そこに読み仮名を添えれば、初めて見る人でも正しく読めます。

13
00:00:58.204 --> 00:01:02.620
学習者向けの教材や、子ども向けのページでも役立ちます。

14
00:01:02.620 --> 00:01:07.362
一方、誰でも読める簡単な言葉にまで付ける必要はありません。

15
00:01:07.362 --> 00:01:12.268
本当に読みに迷う言葉に絞るのが、読みやすいページのコツです。

16
00:01:12.268 --> 00:01:19.136
たとえば駅名や施設名など、初見では読めない地名は案内サイトで特によく見かける例です。

17
00:01:19.136 --> 00:01:21.292
基本の書き方を確認します。

18
00:01:21.292 --> 00:01:24.609
ルビは二つのタグの組み合わせで作ります。

19
00:01:24.609 --> 00:01:28.589
外側のルビタグが、本文と読みの組全体を囲みます。

20
00:01:28.589 --> 00:01:32.072
内側のアールティーに、読み仮名を書きます。

21
00:01:32.072 --> 00:01:37.876
スライドの例では、漢字という本文に、かんじ、という読みを付けています。

22
00:01:37.876 --> 00:01:42.685
ブラウザーでは、漢字の上に小さく、かんじ、と表示されます。

23
00:01:42.685 --> 00:01:48.656
ルビも本文も文章の流れの中で使うので、段落のピーの中に置くのが基本です。

24
00:01:48.656 --> 00:01:54.460
読みを付ける範囲は、言葉の区切りごとに正しく対応させることが大切です。

25
00:01:54.460 --> 00:01:58.772
逆に、ルビタグを閉じ忘れると、その後の文章まで読みが付いた扱いになるので、

26
00:01:58.772 --> 00:02:03.084
終了タグは必ず確認しましょう。

27
00:02:03.084 --> 00:02:06.751
もう一つの仲間、アールピーについて説明します。

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

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

30
00:02:19.825 --> 00:02:23.970
もし対応していない環境で開かれた場合は、本文の直後に括弧付きで読みが表示されるので、

31
00:02:23.970 --> 00:02:28.116
意味が失われません。

32
00:02:28.116 --> 00:02:35.928
今の主要ブラウザーはほぼ対応していますが、確実に伝えるための丁寧な書き方として覚えておきましょう。

33
00:02:35.928 --> 00:02:42.784
普段は見えない保険のような役割と考えると、アールピーを書く意味が分かりやすくなります。

34
00:02:42.784 --> 00:02:45.298
記事の活用事例を見てみましょう。

35
00:02:45.298 --> 00:02:47.812
専門語に読み仮名を添える例です。

36
00:02:47.812 --> 00:02:55.668
構造、という本文に、こうぞう、という読みを、アールティーで指定し、アールピーで括弧も用意しています。

37
00:02:55.668 --> 00:03:01.010
文全体としては、構造を学びます、という一文の中に組み込まれています。

38
00:03:01.010 --> 00:03:06.352
このようにルビは、見出しではなく、ふつうの文章の中でこそ活躍します。

39
00:03:06.352 --> 00:03:10.830
専門用語が多い技術解説や、法律や医療の案内文など、読み間違えると意味が変わってしまう場面で、

40
00:03:10.830 --> 00:03:15.308
特に効果を発揮します。

41
00:03:15.308 --> 00:03:19.472
読み手は本文を読み進めながら、必要なときだけ上の小さな読みに目を移せばよいので、

42
00:03:19.472 --> 00:03:23.636
文章の流れが止まりません。

43
00:03:23.636 --> 00:03:27.615
少し応用として、熟語への付け方を考えます。

44
00:03:27.615 --> 00:03:31.405
ルビの読みは、二通りの付け方があります。

45
00:03:31.405 --> 00:03:39.363
一つは、明日、のように熟語全体に対して、あした、という読みをまとめて付ける方法です。

46
00:03:39.363 --> 00:03:44.479
もう一つは、文字ごとに読みを分けて対応させる方法です。

47
00:03:44.479 --> 00:03:50.353
スライド二行目では、今日を例に文字と読みの対応を示しています。

48
00:03:50.353 --> 00:03:57.932
長い熟語を分けるときは、意味の区切りと読みの対応がずれないよう注意してください。

49
00:03:57.932 --> 00:04:02.858
対応がずれると、かえって読みにくくなってしまいます。

50
00:04:02.858 --> 00:04:10.248
迷ったときは、辞書で読みの区切りを確認してから書くと、対応の間違いを防げます。

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

52
00:04:12.026 --> 00:04:15.137
ルビには、このタグ専用の属性はありません。

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

54
00:04:19.582 --> 00:04:21.212
代表的なのは三つです。

55
00:04:21.212 --> 00:04:28.176
アイディーは文書の中で一つだけの目印で、ページ内リンクやジャバスクリプトからの参照に使います。

56
00:04:28.176 --> 00:04:32.769
クラスはシーエスエスやスクリプトでまとめて選ぶための名前です。

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

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

59
00:04:41.659 --> 00:04:46.401
読み仮名そのものはアールティーの内容で決まる、と覚えてください。

60
00:04:46.401 --> 00:04:53.068
属性を付けてもルビの意味自体は変わらないので、まずは組の書き方を正しくすることが優先です。

61
00:04:53.068 --> 00:04:55.381
見た目についても触れておきます。

62
00:04:55.381 --> 00:05:00.152
標準では、読み仮名は本文の上に、本文より小さい文字で表示されます。

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

64
00:05:04.778 --> 00:05:12.730
アールティーにフォントサイズを指定すれば読みの大きさが変わり、ルビポジションで表示位置の考え方を指定できます。

65
00:05:12.730 --> 00:05:17.790
ただし、読み仮名を小さくしすぎると、かえって読めなくなってしまいます。

66
00:05:17.790 --> 00:05:22.995
文字を拡大して見る人のことも考えて、読みやすさを優先して調整しましょう。

67
00:05:22.995 --> 00:05:30.368
縦書きの文章では読みの位置の見え方が横書きと異なる場合もあるので、表示形式に合わせて確認してください。

68
00:05:30.368 --> 00:05:32.394
ブラウザー互換性を確認します。

69
00:05:32.394 --> 00:05:38.676
記事が参照するエムディーエヌの記録では、ルビ要素は、クロームがバージョン五以降、

70
00:05:38.676 --> 00:05:44.957
エッジが十二以降、ファイアフォックスが三十八以降、サファリが五以降と、主要ブラウザーで広く対応しています。

71
00:05:44.957 --> 00:05:46.983
安心して使えるタグの一つです。

72
00:05:46.983 --> 00:05:53.738
ただし、ファイアフォックスはほかより対応開始が遅めだった点は、豆知識として覚えておくとよいでしょう。

73
00:05:53.738 --> 00:05:58.871
また、読みの細かい表示位置など、シーエスエス側の対応は別に確認してください。

74
00:05:58.871 --> 00:06:02.113
大切なページでは実機でも一度確認すると安心です。

75
00:06:02.113 --> 00:06:09.948
スマートフォンのブラウザーでも基本的には同じように表示されますが、文字サイズの初期設定は端末で異なることがあります。

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

77
00:06:13.365 --> 00:06:15.927
一つ目、本文と読みの対応です。

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

79
00:06:21.907 --> 00:06:26.178
対応が一つずれると、文章全体が読みにくくなります。

80
00:06:26.178 --> 00:06:28.740
二つ目、付けすぎに注意します。

81
00:06:28.740 --> 00:06:34.207
すべての漢字に読みを付けると、画面がごちゃごちゃして逆効果です。

82
00:06:34.207 --> 00:06:36.770
読みに迷う言葉に絞りましょう。

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

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

85
00:06:47.703 --> 00:06:56.416
公開後に読みの間違いに気づいたら、本文だけでなくルビ側も直したか、あわせて確認する習慣をつけましょう。

86
00:06:56.416 --> 00:06:58.395
最後に練習とまとめです。

87
00:06:58.395 --> 00:07:03.176
ルビは、漢字などの本文と読み仮名の組をまとめるタグでした。

88
00:07:03.176 --> 00:07:05.320
大切なポイントは三つです。

89
00:07:05.320 --> 00:07:10.761
一つ目、外側のルビで組を囲み、内側のアールティーに読みを書くこと。

90
00:07:10.761 --> 00:07:17.191
二つ目、アールピーで括弧を用意すると、対応していない環境でも読みが伝わること。

91
00:07:17.191 --> 00:07:22.632
三つ目、本文と読みの対応をそろえ、必要な言葉にだけ付けることです。

92
00:07:22.632 --> 00:07:29.392
練習として、自分の名前や地名など、読みにくい身近な言葉にルビを付けてみてください。

93
00:07:29.392 --> 00:07:30.876
お疲れさまでした。

94
00:07:30.876 --> 00:07:35.163
次回もエイチティーエムエルタグの解説を続けましょう。

95
00:07:35.163 --> 00:07:40.604
小さなタグですが、読み手への思いやりが形になったタグだと言えます。