HTMLのrubyタグでテキストにルビ(ふりがな)をふる方法【HTML】

地名や人名、特殊な漢字などにルビ(ふりがな)を振る際にはruby要素を使用します。
このruby要素の使い方や、それに付随するrt要素・rp要素などについても詳しく解説していきます。

ruby要素についてと使い方

テキストにルビ(ふりがな)を振るにはruby要素などいくつかの要素を使用します。
ruby要素はルビを振るテキストの範囲を指定する要素となっていますので、ルビ(ふりがな)を振りたいベースとなるテキストを以下のようにrubyタグで囲います。

<ruby>漢字</ruby>にルビを振る

このruby要素で囲った「漢字」の部分がルビを振る範囲となります。
ルビ自体については次項で解説するrt要素・rp要素での設定になりますので次項をご覧ください。

これらの要素は全てインライン要素となります。

rt要素・rp要素について

先程の例として記述したruby要素のテキストに対してルビを振るにはrt要素を使用します。
まずは以下のコードと表示例をご覧ください。

<ruby>漢字<rt>かんじ</rt></ruby>にルビを振る

上記例のようにrt要素に記述した部分がルビとなり、ruby要素で囲ったテキストの上にルビが表示されます。

続いてrp要素についてですが、これはruby要素に対応していないブラウザで表示する際に使用する要素となり、rp要素で囲った内容がrt要素の内容と共にベーステキストの隣に表示されます。rp要素の使用例と表示例は以下となります。

<ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>にルビを振る

上記のように、ruby要素に対応していない場合はrt要素の内容がベーステキストの右側に表示されてしまうため、rp要素で括弧などを指定してふりがなと分かるようにします。
※現状モダンブラウザは全てruby要素に対応していますので、あえてrp要素を使用する必要もないと個人的には思います。

ちなみにですが、rt要素は「Ruby Text」、rp要素は「Ruby Parentheses」の略となるようです。

一文字ずつルビを振りたい場合

一文字ずつルビを振りたい場合には、以下のように指定します。

<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>にルビを振る

先程までと違い一文字ずつにルビが振られています。
一文字ずつルビを振るとタグがかなり多くなりますが、一文字ずつでルビを振る方がいいのか、単語としてルビを振る方がいいのかは言葉や意味によって変わってきますので、適切な表示を心掛けるようにしましょう。

rb要素・rtc要素について

ruby要素について調べていると、rb要素やrtc要素について解説しているサイトも多くあるかと思います。
このrb要素・rtc要素については現在は非推奨(廃止)となっている要素ですので使用しないようにしてください。

ちなみに、rb要素は「Ruby Base」の略で、ルビを振る対象を明示的に示す時に使用する要素となります。
rtc要素は「Ruby Text Container」の略で、2種類のルビを振る「両側ルビ」を使用する時に使用しましたが、対応ブラウザが少ない要素となります。

さいごに

いかがでしたでしょうか。
今回は、HTMLのruby要素でテキストにルビ(ふりがな)をふる方法を解説しました。
ルビ(ふりがな)を振る場面はたまにありますので、内容をしっかりと理解して適切に使用できるようにしてください。