VIDEO LESSON

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

再生時間 8:01動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

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

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:04HTMLタグ編の三十五本目は、アールティータグです。
0:08前回扱ったルビは、本文と読み仮名の組全体をまとめるタグでした。
0:12今回のアールティーは、その内側で読み仮名そのものを書く場所です。
0:17小さなタグですが、役割ははっきりしています。
0:20本文はルビの中に直接書き、読みだけをアールティーで囲む、この分担を覚えることが今回の出発点です。
0:27読みが正しく伝わるかどうかは、このタグの書き方で決まります。
0:32今回の主役は読みの部分ですので、本文側のルビの復習も兼ねながら、ゆっくり進めていきます。
0:38どんな場面でアールティーが活躍するか見ていきましょう。
0:42読み方が分かりにくい漢字や専門用語は、知らない人にとって大きな壁になります。
0:48人名や地名のような固有名詞も、見た目だけでは読み方を判断できません。
0:54そんなとき、本文の上に小さく読みを示せば、読み手は辞書を引かずに読み進められます。
1:00教材や子ども向けの文章でも同じです。
1:03逆に、誰でも読める言葉にまで読みを付ける必要はありません。
1:07本当に迷う言葉に絞ることが大切です。
1:10たとえば観光案内や学校の配布物など、不特定多数の人が読むページでは、読みの有無が理解の速さを大きく左右します。
1:19基本の書き方を確認します。
1:21記事の例では、余白、という本文に、よはく、という読みを付けています。
1:28書き方は三つの部分に分かれます。
1:30まず外側をルビで囲み、次に本文の余白をそのまま書き、最後にアールティーの中に読みの、
1:35よはく、だけを入れます。
1:40ブラウザーでは、余白の上に小さく、よはく、と表示されます。
1:46アールティーは単独では使わず、必ずルビの内側に置くのが決まりです。
1:52段落の中に置けば、文章の流れの中で自然に使えます。
1:56終了タグの閉じ忘れがあると、その後の文章まで影響することがあるので、タグの組は必ずセットで確認してください。
2:06ここで、初心者が間違えやすい決まりを整理します。
2:11一つ目、アールティーはルビの中でだけ使います。
2:15ルビの外に単独で置いても、読みとしての意味は成り立ちません。
2:20二つ目、本文と読みを逆にしないことです。
2:24本文をアールティーへ入れて、読みを外側に置くような書き方は誤りです。
2:30アールティーの中身は、あくまで読み仮名だけです。
2:34三つ目、読みは対応する本文の直後に置きます。
2:38本文と読みの対応がずれると、読み手が混乱してしまうので、書き終えたら必ず見直しましょう。
2:46ブラウザーが自動で直してくれる場合もありますが、正しい構造で書くことが、
2:51どの環境でも同じ表示にする近道です。
2:56次に、複数の読みを付ける例です。
2:58一つのルビの中には、アールティーを複数置くこともできます。
3:03スライドの例では、東京に、とうきょう、駅に、えき、という読みを、それぞれ分けて対応させています。
3:10このように言葉の区切りごとに分けると、どの文字にどの読みが付いているのかが明確になります。
3:17一方、熟語全体に一つの読みをまとめて付ける書き方もあります。
3:22どちらの場合も、意味の区切りと読みの対応をそろえることが、読みやすさの決め手になります。
3:28分けて書く方法は、読みの学習を助ける教材や、振り仮名を細かく付けたい子ども向けのページでもよく使われます。
3:36アールピーと組み合わせる書き方も確認しておきましょう。
3:41アールピーは、ルビ表示に対応していない環境のために、読みを囲む括弧などを置く場所です。
3:47スライドの例では、アールティーの読みの前後に、アールピーで丸括弧を用意しています。
3:53対応しているブラウザーでは括弧は表示されず、読みは本文の上に小さく出ます。
3:59対応していない環境では、本文の直後に括弧付きで読みが並ぶので、意味が失われません。
4:05今の主要ブラウザーはほぼ対応していますが、丁寧な書き方として覚えておきましょう。
4:11アールピーを省略しても今のブラウザーでは問題ありませんが、書いておくことで古い環境への配慮が形になります。
4:19属性について整理します。
4:21アールティーには、このタグ専用の属性はありません。
4:25必要に応じて、すべての要素で使えるグローバル属性を使います。
4:30アイディーは文書の中で一つだけの識別子で、ページ内リンクやジャバスクリプトからの参照に使います。
4:37クラスは、シーエスエスやスクリプトで複数の要素をまとめて選ぶための名前です。
4:43ラングはその部分の言語を示し、日本語ならジェイエーを指定します。
4:48ほかに、独自の値を保持するデータ属性もあります。
4:51読みそのものは属性ではなく、アールティーの中身で決まります。
4:56子要素に指定する属性と混同しないように、属性はアールティー自身に付けるのか、
5:00ルビ全体に付けるのかも確認しましょう。
5:05見た目についても触れておきます。
5:07標準では、アールティーの読みは本文の上に、本文より小さい文字で表示されます。
5:12この大きさは、スライドのようにシーエスエスで調整できます。
5:16アールティーにフォントサイズを指定すれば読みの大きさが変わり、色も変更できます。
5:22ただし、読みを小さくしすぎると、せっかく付けた読み自体が読めなくなってしまいます。
5:28文字を拡大して見る人や、スマートフォンで読む人のことも考えて、読みやすさを優先して調整してください。
5:35見た目の変更はシーエスエス、意味の指定はタグ、と分けて考えるのが基本です。
5:40色を変える場合も、本文との区別がつく程度にとどめ、読みが本文より目立ちすぎないようバランスを取りましょう。
5:48ブラウザー互換性を確認します。
5:50記事が参照するエムディーエヌの記録では、アールティーを含むルビの仕組みは、
5:55クロームがバージョン五以降、エッジが十二以降、ファイアフォックスが三十八以降、
6:01サファリが五以降と、主要ブラウザーで古くから広く対応しています。
6:06安心して使えるタグの一つです。
6:09ただし、これは要素本体の対応状況で、読みの細かい表示位置など、シーエスエス側の対応は別に確認が必要です。
6:16大切なページでは、対象の端末でも一度表示を確かめると安心です。
6:21対応開始の時期が古いということは、それだけ長く使われてきた、安定した仕組みだということでもあります。
6:29実装前後のチェックポイントをまとめます。
6:32一つ目、本文と読みの対応です。
6:34どの文字にどの読みが付いているか、書き終えたら必ず見直してください。
6:40二つ目、読み自体の正確さです。
6:42人名や地名は読み間違いが多いので、公式な表記で確認してから書きましょう。
6:48間違った読みを付けるくらいなら、付けない方がましです。
6:53三つ目は表示の確認です。
6:55三百二十ピクセル程度の狭い画面や、文字を拡大したときにも、本文と読みの両方が欠けずに読めるか確かめます。
7:03公開前に一度声に出して読んでみるのも、間違いに気づく良い方法です。
7:08ルビを含むページでは、文字だけを拡大して読む人のことも考え、行間が詰まりすぎていないかもあわせて見ておきましょう。
7:18最後に練習とまとめです。
7:19アールティーは、ルビの中で読み仮名を記述するタグでした。
7:24大切なポイントは三つです。
7:26一つ目、アールティーの中身は読みだけにし、本文と逆にしないこと。
7:31二つ目、必ずルビの内側で、対応する本文の直後に置くこと。
7:35三つ目、言葉の区切りと読みの対応をそろえ、正確な読みを書くことです。
7:41練習として、自分の名前や駅名など、読みにくい身近な言葉で、ルビとアールティーの組を一つ書いてみてください。
7:49お疲れさまでした。
7:50次回はアールピータグを解説します。
7:53小さなタグですが、正しく使えば読み手のつまずきを一つ減らせる、思いやりのあるタグだと言えます。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

rtタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。ruby の中に読み仮名を記述します。

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