【HTML5】ふりがなを振ろう！ruby要素などルビ関連要素の使い方

ruby要素はふりがなをつけるためのHTML要素で、rubyはそのままルビ(ふりがな)のことを意味します。

ルビ関連の要素はruby要素を含めていくつかあり、その使い方を混同してしまったりするので、記事にまとめてみました！

ruby要素

ruby要素は、 ルビ関連要素の大枠となるもので、他の全てのルビ関連要素はruby要素内で使用します。

ルビ関連要素は他に、rt要素、rb要素、rp要素、rtc要素の4つがあります。

rt要素

rt要素は「ruby text」の略で、ルビとして表示させたいテキストはこの要素を指定します。

この要素が一番の肝となる要素です。

See the Pen ruby要素① by spiqa design (@spiqa_design) on CodePen.

rb要素

rb要素のbは「base text」を意味し、その内容がルビを振る対象となることを表します。

上の例を見ていただければわかる通り、必ずしもrb要素で囲わなくても大丈夫です。

漢字とふりがなとで別々にスタイルを調整したい時は、漢字をrb要素で囲うといいでしょう。

See the Pen ruby要素② by spiqa design (@spiqa_design) on CodePen.

rp要素

ルビ要素に未対応のブラウザでは、漢字とルビが同じ大きさでそのまま続けて表示されてしまいます。

上記例だと、そのまま「寿司すし」と表示されます。

rp要素は未対応のブラウザでルビ要素を表示させた時、ルビに（）をつけることができる要素です。
表示を「寿司(すし)」と表示されるようにします。

対応ブラウザではrp要素の内容は表示されません。

rp要素のpは「parentheses（丸かっこ）」という意味です。

See the Pen Untitled by spiqa design (@spiqa_design) on CodePen.

rtc要素

rtc要素は、rt要素をグループ化する要素です。

rtcは「ruby text container(rt要素の入れもの)」という意味です。

たとえばひらがなのルビだけでなく、下にローマ字のルビも振りたい時などに、それぞれのルビを区別するためにrtc要素を使用します。
※下の例では特にスタイル調整していないのでローマ字部分がそのまま続けて表示されています。

See the Pen ruby要素④ by spiqa design (@spiqa_design) on CodePen.

ルビ関連要素の使い方まとめ

関連要素がruby要素も含めると合計5つもあるので、こんがらがってしまいますよね。

自分の備忘録としてもこの記事を書きました。そんなに頻繁に使用するHTMLタグでもないので、使い慣れるまではこの記事をぜひ参考にしてください！

こちらの記事もおすすめ

コーディング

2022.01.11

【HTML5】ふりがなを振ろう！ruby要素などルビ関連要素の使い方

ruby要素はふりがなをつけるためのHTML要素で、rubyはそのままルビ(ふりがな)のことを意味します。 ルビ関連の要素はruby要素を含めていくつかあり、そ…