HTMLで難しい日本語の表記を多く用いる際、意外と必要になるのが漢字へのフリガナです。Webサイト作成時にルビがふれれば、より読者の幅も広がり、サイトとしての需要が広がりますよね。そんな時に役に立つのが<ruby>タグです。
今回は、rpタグの
・類似タグ<ruby>・<rt>・<rb>との違い
・rpタグの具体的な使い方
について説明します。またルビを振るうえで欠かせない、<ruby>タグ、<rt>タグ、<rb>タグの動作も併せて確認！ルビに関する情報をまとめて解説します。
目次
rpタグとは
rpタグの読み方
<rp>タグ：（読み方）ルビ・アールビータグ
Ruby Parenthesesの略で、Rubyはルビを、Parenthesesは括弧を表します。
rpタグの説明
rpタグはルビ非対応の環境で、<ruby>タグが使用できなかった際に使用するタグです。ルビを振る場合、通常であれば<ruby>タグ、<rt>タグ、<rb>タグでルビを振ることができます。
しかしブラウザがルビに未対応の場合は、ルビの表記が横に羅列されるため、非常に読みづらくなってしまうのです。
そんな時に役立つのがrpタグです。rpタグはrubyタグ非対応時に備え、ルビを括弧で囲います。rubyタグが対応している場合は、rpタグは表示されません。
rpタグで利用できる属性
rpタグでは以下のHTML全要素で使用できるグローバル属性のみが使用可能です。
| 属性 | 説明 |
|---|---|
| accesskey属性 | キーボードのショートカットの生成し、簡易なアクセスを可能にする |
| class属性 | 要素に任意の名称を与える（同じclass名を複数の要素に与えられる） |
| dir属性 | テキストの書字方向を示す ・ltr：「left to right」左から右 ・rtl：「rght to left」右から左 ・auto：自動的に書字方向を決定する |
| hidden属性 | 要素に関連性がないことを示す |
| id属性 | 要素に任意の名称を与える（同じidは使用できない：一意性） |
| lang属性 | 要素の言語を定義する |
| style属性 | 要素にCSSスタイル宣言を適用する |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 5 |
| Edge | 79 |
| Firefox | 38 |
| nternet Explorer | 5 |
| Opera | 15 |
| Safari | 5 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 38 |
| Android 版 Opera | 14 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
rpタグの基本的な使い方
rpタグの使い方
先述した通り、rpタグはrubyタグ対応環境では無視されます。以下のサンプルコードでは、通常のようにルビが漢字の上に振られていますが、これが非対応の場合は横に括弧でルビが表示されるのです。
See the Pen
rpタグ by rabbittyu (@rabbittyu)
on CodePen.
以下のサンプルでは、2行目でrubyタグ非対応時の表示を示してあります。ruby未対応環境が用意できなかったため、あくまでも表示例ですが、このように<rp></rp>で囲った（括弧）がついたフリガナが横に表示されるのです。
See the Pen
rpタグ 比較 by rabbittyu (@rabbittyu)
on CodePen.
rpタグと類似する要素との違い
ここではルビを振るのに欠かせない、rubyタグ、rtタグ、rbタグの違いを見ていきましょう。それぞれの違いは以下の通りです。
・rubyタグ -> ルビを振るタグの親要素
・rtタグ -> ルビの内容を記述する
・rbタグ -> ルビを振る文字を指定する（HTML5以降では省略）
どれもルビを振るのに欠かせないタグですが、rbタグはHTML5以降からは省略されるようになりました。元々Internet Explorerが独自に採用したものなので、今後も登場することはないでしょう。
rubyタグはルビを振る際に必ず親要素になります。またrtタグの中には、振りたいルビの内容を記述します。
rpタグの応用的な使い方
では少し応用的な使い方をご紹介します。ここでは先ほどと異なり、漢字1文字ずつにルビを振るようにサンプルコードを用意しました。
See the Pen
rpタグ 応用 by rabbittyu (@rabbittyu)
on CodePen.
上の例では、フリガナが対応する漢字1文字ずつについています。下の例と異なるのは、漢字1文字ずつにrpタグ、rtタグを用い、それぞれにフリガナを与えているという点です。
まとめ
今回はルビを振るのに欠かせないrpタグをご紹介しました。rubyタグは現在ほとんどのブラウザで対応していますが、読者の環境を考え、念のためrpタグで括弧を記述しておいた方が良いでしょう。
またルビを振る際は、余力があれば漢字1文字ずつ振ると、より正しくルビを振ることができます。状況により、使い分けてください。
参考文献：
MDN web docs <rp>: ルビのフォールバック用括弧要素
HTML5タグリファレンス：rp
HTML5タグリファレンス：ruby
HTMLタグリファレンス：RT
HTMLタグリファレンス：RB
HTMLタグリファレンス：RP
＜rp＞ルビを囲む記号を指定する
MDN web docs <ruby>
HTMLタグ一覧
HTML5における<rp>タグの使い方
