テキストにルビ(ふりがな)を振ることができる要素【HTML】

文章内のテキストに対して、ふりがなを振ったり説明書きをつけるときの要素があります。

基本となるのはruby要素。そして表示するルビを指定するrt要素、ルビを囲む括弧を表示させるrp要素、ルビの対象を指定するrb要素、ルビテキストのあつまりを表すrtc要素などが関係しています。

ruby要素（ルビ）

テキストにルビ（ふりがな）を振るときには、ruby要素を使います。

ルビを振ると、「薔薇ばら」のように文字の上に小さく表示させることができます。

rt要素の内容がテキストに振られるルビとなって表示されます。

先ほどの薔薇はどのように表示させているかというと以下のようにしています。

rt要素の終了タグは、すぐ後にrt要素をもうひとつ記述する場合や、後述するrp,rb,rtc要素が記述される場合は省略することができますが、開始タグと終了タグのペアがわかりづらくなるので、あまり省略しない方がいいかもしれません。

また、ブラウザ環境がruby要素に対応していない場合は、rt要素で指定した内容が「薔薇ばら」という風に、そのまま表示されてしまいます。

ruby要素に対応していない場合は、rt要素の内容がそのまま表示されてしまうといいましたが、そういったケースに備えてrp要素があります。

rp要素は対応していないブラウザで文字や括弧を表示させることができる要素なんです。

たとえば先ほどの「薔薇ばら」となってしまう例ですが、上のようにrp要素を付け加えることで、対応しているブラウザでは「薔薇ばら」と表示され、対応していないブラウザでは「薔薇（ばら）」と表示されます。

括弧がなくてもふりがなだと予想はつきますが、不自然ですよね。rp要素で括弧をつけるだけで、ふりがなだと自然に思ってもらうことができるわけです。

rb要素はルビの対象となるテキストを表します。

「薔薇ばら」でいうと、「薔薇」の部分ですね。ふりがなが振られるテキストのことです。

rtc要素はルビ・テキスト・コンテナーといって、ルビテキスト（rb要素）のあつまりを表します。

ルビを振る対象テキストが1つなのに対して、複数のルビを振る場合などに使えます。