VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:04HTMLタグ編の三十四本目は、ルビタグです。
0:07ルビとは、漢字などの本文の上に、小さな文字で読み方を示す仕組みのことです。
0:13教科書やニュースサイトで、難しい漢字の上にフリガナが付いているのを見たことがあると思います。
0:20このルビでは、本文と読み仮名をひと組としてまとめます。
0:24今回は、パートナーとなるアールティーとアールピーも一緒に、初心者向けに順番に解説します。
0:31漢字が読めないと文章の理解そのものが止まってしまうので、この小さな工夫が読み手の助けになります。
0:38では、どんな場面で使うのか見ていきましょう。
0:42代表的なのは、読み方が分かりにくい言葉です。
0:46難しい漢字が続く専門用語、人名や地名のような固有名詞は、知らないと読み間違えてしまいます。
0:53そこに読み仮名を添えれば、初めて見る人でも正しく読めます。
0:58学習者向けの教材や、子ども向けのページでも役立ちます。
1:02一方、誰でも読める簡単な言葉にまで付ける必要はありません。
1:07本当に読みに迷う言葉に絞るのが、読みやすいページのコツです。
1:12たとえば駅名や施設名など、初見では読めない地名は案内サイトで特によく見かける例です。
1:19基本の書き方を確認します。
1:21ルビは二つのタグの組み合わせで作ります。
1:24外側のルビタグが、本文と読みの組全体を囲みます。
1:28内側のアールティーに、読み仮名を書きます。
1:32スライドの例では、漢字という本文に、かんじ、という読みを付けています。
1:37ブラウザーでは、漢字の上に小さく、かんじ、と表示されます。
1:42ルビも本文も文章の流れの中で使うので、段落のピーの中に置くのが基本です。
1:48読みを付ける範囲は、言葉の区切りごとに正しく対応させることが大切です。
1:54逆に、ルビタグを閉じ忘れると、その後の文章まで読みが付いた扱いになるので、
1:58終了タグは必ず確認しましょう。
2:03もう一つの仲間、アールピーについて説明します。
2:06アールピーは、ルビ表示に対応していない環境のために、読み仮名を囲む括弧などを置く場所です。
2:13対応しているブラウザーでは括弧は表示されず、読みは本文の上に小さく出ます。
2:19もし対応していない環境で開かれた場合は、本文の直後に括弧付きで読みが表示されるので、
2:23意味が失われません。
2:28今の主要ブラウザーはほぼ対応していますが、確実に伝えるための丁寧な書き方として覚えておきましょう。
2:35普段は見えない保険のような役割と考えると、アールピーを書く意味が分かりやすくなります。
2:42記事の活用事例を見てみましょう。
2:45専門語に読み仮名を添える例です。
2:47構造、という本文に、こうぞう、という読みを、アールティーで指定し、アールピーで括弧も用意しています。
2:55文全体としては、構造を学びます、という一文の中に組み込まれています。
3:01このようにルビは、見出しではなく、ふつうの文章の中でこそ活躍します。
3:06専門用語が多い技術解説や、法律や医療の案内文など、読み間違えると意味が変わってしまう場面で、
3:10特に効果を発揮します。
3:15読み手は本文を読み進めながら、必要なときだけ上の小さな読みに目を移せばよいので、
3:19文章の流れが止まりません。
3:23少し応用として、熟語への付け方を考えます。
3:27ルビの読みは、二通りの付け方があります。
3:31一つは、明日、のように熟語全体に対して、あした、という読みをまとめて付ける方法です。
3:39もう一つは、文字ごとに読みを分けて対応させる方法です。
3:44スライド二行目では、今日を例に文字と読みの対応を示しています。
3:50長い熟語を分けるときは、意味の区切りと読みの対応がずれないよう注意してください。
3:57対応がずれると、かえって読みにくくなってしまいます。
4:02迷ったときは、辞書で読みの区切りを確認してから書くと、対応の間違いを防げます。
4:10属性について整理します。
4:12ルビには、このタグ専用の属性はありません。
4:15必要に応じて、すべての要素で使えるグローバル属性を使います。
4:19代表的なのは三つです。
4:21アイディーは文書の中で一つだけの目印で、ページ内リンクやジャバスクリプトからの参照に使います。
4:28クラスはシーエスエスやスクリプトでまとめて選ぶための名前です。
4:32ラングは、その部分の言語を示すもので、日本語ならジェイエーを指定します。
4:38ほかに、独自の値を保持するデータ属性もあります。
4:41読み仮名そのものはアールティーの内容で決まる、と覚えてください。
4:46属性を付けてもルビの意味自体は変わらないので、まずは組の書き方を正しくすることが優先です。
4:53見た目についても触れておきます。
4:55標準では、読み仮名は本文の上に、本文より小さい文字で表示されます。
5:00この大きさや位置は、スライドのようにシーエスエスで調整できます。
5:04アールティーにフォントサイズを指定すれば読みの大きさが変わり、ルビポジションで表示位置の考え方を指定できます。
5:12ただし、読み仮名を小さくしすぎると、かえって読めなくなってしまいます。
5:17文字を拡大して見る人のことも考えて、読みやすさを優先して調整しましょう。
5:22縦書きの文章では読みの位置の見え方が横書きと異なる場合もあるので、表示形式に合わせて確認してください。
5:30ブラウザー互換性を確認します。
5:32記事が参照するエムディーエヌの記録では、ルビ要素は、クロームがバージョン五以降、
5:38エッジが十二以降、ファイアフォックスが三十八以降、サファリが五以降と、主要ブラウザーで広く対応しています。
5:44安心して使えるタグの一つです。
5:46ただし、ファイアフォックスはほかより対応開始が遅めだった点は、豆知識として覚えておくとよいでしょう。
5:53また、読みの細かい表示位置など、シーエスエス側の対応は別に確認してください。
5:58大切なページでは実機でも一度確認すると安心です。
6:02スマートフォンのブラウザーでも基本的には同じように表示されますが、文字サイズの初期設定は端末で異なることがあります。
6:09実装前後のチェックポイントをまとめます。
6:13一つ目、本文と読みの対応です。
6:15どの文字にどの読みが付いているのか、書き終えたら必ず見直してください。
6:21対応が一つずれると、文章全体が読みにくくなります。
6:26二つ目、付けすぎに注意します。
6:28すべての漢字に読みを付けると、画面がごちゃごちゃして逆効果です。
6:34読みに迷う言葉に絞りましょう。
6:36三つ目は表示の確認です。
6:38三百二十ピクセル程度の狭い画面や、文字を拡大したときにも、本文と読みの両方が欠けずに読めるか確かめます。
6:47公開後に読みの間違いに気づいたら、本文だけでなくルビ側も直したか、あわせて確認する習慣をつけましょう。
6:56最後に練習とまとめです。
6:58ルビは、漢字などの本文と読み仮名の組をまとめるタグでした。
7:03大切なポイントは三つです。
7:05一つ目、外側のルビで組を囲み、内側のアールティーに読みを書くこと。
7:10二つ目、アールピーで括弧を用意すると、対応していない環境でも読みが伝わること。
7:17三つ目、本文と読みの対応をそろえ、必要な言葉にだけ付けることです。
7:22練習として、自分の名前や地名など、読みにくい身近な言葉にルビを付けてみてください。
7:29お疲れさまでした。
7:30次回もエイチティーエムエルタグの解説を続けましょう。
7:35小さなタグですが、読み手への思いやりが形になったタグだと言えます。

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

この動画で学べること

rubyタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。漢字と読み仮名などのルビの組をまとめます。

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