HTML5における＜rp＞タグの使い方

<rp>タグは、<ruby>タグや<rt>タグを使ってルビを振る際に、ルビが未対応のブラウザの場合に専用の表示をさせてくれるものです。今回は、HTML5における＜rp＞タグの使い方についてご紹介します。

HTML5における＜rp＞タグの使い方

<rp>要素は、<ruby>タグや<rt>タグを使ってルビを振ったテキストを生成するようにした際に、ルビが未対応のブラウザ向けの表示を指定することができます。まず、通常の<rp>を使用していない場合のルビを振った記述を確認してみましょう。

<ruby>と<rt>だけの場合

サンプルコードです。以下のようにルビを振った文章全体を、<ruby>で囲んで、ルビだけを <rt>で囲んであります。

表示サンプルです。ルビに対応しているブラウザでは、上のように記述することで、このように単語の上にルビを表示させることができます。

しかし古いブラウザなど、一部のブラウザではルビに未対応の場合があります。未対応のブラウザで上記のコードを表示させると、下の画像のように、ルビは上部ではなく横に表示されてしまいます。

文章の途中でこのように表示がおこると、ルビと文章の境目が混ざって、非常に読みづらくなります。

<rp>タグを使用した場合

そこで<rp>タグを利用して、ルビに未対応のブラウザ向けの表示を指定しておくことで、ルビが表示できないブラウザでも、テキストを問題なく閲覧することができるようになります。下記はルビが未対応のブラウザでの、表示サンプルです。

（）の中と外を<rp>タグで囲んでいるので、（）はブラウザが未対応の時のみ表示されます。これでルビが右側に表示されてしまっても、文章と混同してしまうのを防ぐことができます。