HTML要素 ・ 見出し・文章
<rp>
ルビ非対応時の括弧
ルビに対応していない環境でだけ表示される括弧を書く要素です。rt の前後に置き、対応環境では非表示になります。
01
サンプルコード
HTML
1<p><ruby>紫陽花<rp>（</rp><rt>あじさい</rt><rp>）</rp></ruby></p>
2<p class="fallback"><ruby>紫陽花<rp>（</rp><rt>あじさい</rt><rp>）</rp></ruby></p>
CSS
1p {
2 font-size: 20px;
3 line-height: 2.4;
4}
5/* ルビ非対応の環境を再現 */
6.fallback ruby, .fallback rt, .fallback rp {
7 display: inline;
8 font-size: inherit;
9}
02
実行結果
ブラウザでの表示2行目はルビ非対応の環境の表示を、CSSで再現しています
03
解説
rp は "ruby parenthesis"（ルビの括弧）の略です。ルビに対応したブラウザでは表示されず、対応していない環境でだけ表示されます。
上の例の2行目は、CSSでルビに対応していない環境を再現したものです。このとき rp の括弧が表示され、「紫陽花（あじさい）」と読みが括弧書きで伝わります。
現在の主要なブラウザはすべてルビに対応していますが、読み上げソフトやテキストを取り出す仕組みでは括弧があると意味が伝わりやすくなります。
04
応用例・注意点
書き方
| パターン | 説明 |
|---|---|
<rp>（</rp><rt>…</rt><rp>）</rp> | 全角の括弧で囲む（日本語向け） |
<rp>(</rp><rt>…</rt><rp>)</rp> | 半角の括弧で囲む |
熟語全体にルビを付ける基本形
ruby・rt・rp をそろえた、もっとも安全な書き方です。
HTML
1<ruby>
2 薔薇<rp>（</rp><rt>ばら</rt><rp>）</rp>
3</ruby>
注意点
- 01rp には括弧などの記号だけを書きます。
- 02rp は rt の直前・直後に置きます。離れた場所に置くと意味がありません。