HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<rp>
ルビ括弧(Ruby Fallback Parenthesis)要素。ルビをサポートしないブラウザのための代替要素です。
info
概要
<rp> 要素は、ルビ注釈(<rt>要素)をサポートしていないブラウザに対して、ルビテキストを括弧で囲んで表示するための要素です。
<ruby>要素の子要素として、ルビテキストの前後(<rt>要素の前後に)に記述します。最新のブラウザの多くは<rt>を直接サポートしているため、通常は<rp>の内容は非表示になります。
play_circle
デモ (静的表示)
HTML (Source)
<!-- 最新ブラウザでは「漢(かん)字(じ)」と表示 -->
<ruby>
漢<rp>(</rp><rt>かん</rt><rp>)</rp>
字<rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>
<br><br>
<!-- <rt>をサポートしない古いブラウザでの表示例 -->
<div style="font-size: 1.2rem; border: 1px dashed gray; padding: 8px;">
漢字(かん)字(じ)
</div>
Preview (Result)
漢
字
漢字(かん)字(じ)
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| グローバル属性 | 全てのHTML要素で使用できるグローバル属性のみが適用可能です。独自の属性はありません。 |
code
実用例
1. 標準的なルビの記述
<p>
<ruby>
故字<rp>(</rp><rt>ふる</rt><rp>)</rp>
<span>郷</span><rp>(</rp><rt>さと</rt><rp>)</rp>
</ruby>
</p>
(<rt>をサポートするブラウザでは「故郷(ふるさと)」、非サポートブラウザでは「故郷(ふるさと)」のように表示されます。)
2. 複数文字に対するルビ
<p>
<ruby>
春望<rp>(</rp><rt>しゅんぼう</rt><rp>)</rp>
</ruby>
</p>
lightbulb
知っておくべき重要事項
browser_not_supported
<rp>の役割
現代の主要なブラウザは全て
現代の主要なブラウザは全て
<rt>要素を正しく解釈し、ルビを自動で括弧なしで表示します。そのため、通常<rp>要素の中身は無視され、画面には表示されません。<rp>は**古いブラウザ向け**のフォールバック(代替表示)のための要素であると理解してください。
accessibility_new
アクセシビリティ
<ruby>、<rt>、<rp>のセットは、東アジア言語の文字に読み方(ルビ)を提供するために重要です。スクリーンリーダーなどの支援技術は、これらの要素構造を利用して適切な読み上げを行います。セマンティクスを正しく保つため、ルビが必要な箇所には必ず<ruby>構造を使用しましょう。