【HTML Living Standard】rp要素の使い方
rp要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
rpオブジェクトは、HTMLのルビ注釈（ruby annotation）において、代替コンテンツを表現するためのオブジェクトです。ルビ注釈は、主に東アジアの言語で、親文字（ベーステキスト）に読み方や意味を示すルビテキストを付加する際に使用されます。このrpオブジェクトは、ruby要素の内部で、ルビテキストを定義するrt要素をサポートしない古いウェブブラウザや特定のユーザーエージェントに対して、ルビテキストの情報を適切に表示するための補助的な役割を果たします。
具体的には、ruby要素の子要素として、ルビの親文字とrt要素の間に配置することで、もしブラウザがrt要素を正しく解釈できない場合でも、rpオブジェクトに含まれる内容（例えば、ルビテキストを囲む括弧など）を表示し、ルビの意味を損なわないようにします。例えば、<ruby>親文字<rp>(</rp><rt>ルビ</rt><rp>)</rp></ruby>のように記述されます。
現代の主要なウェブブラウザはrt要素を直接サポートしているため、通常、rpオブジェクトに記述された内容は画面には表示されません。しかし、アクセシビリティツールや旧式のブラウザ環境など、多様な閲覧環境においてルビ注釈が意図通りに伝わることを保証するためのフォールバックメカニズムとして、依然として重要な役割を担っています。ウェブコンテンツの互換性とアクセシビリティを向上させるために、rpオブジェクトはルビ注釈の記述において推奨される要素の一つです。
構文(syntax)
1<rp>代替テキスト</rp>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
RPGセリフでルビを振る
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>RPGゲームのセリフとルビの例</title> 7</head> 8<body> 9 <!-- RPGゲームのセリフで、漢字に読み仮名（ルビ）を振る例 --> 10 <p> 11 <ruby> 12 勇者<rp>(</rp><rt>ゆうしゃ</rt><rp>)</rp> 13 </ruby>よ、 14 <ruby> 15 魔王<rp>(</rp><rt>まおう</rt><rp>)</rp> 16 </ruby>を倒せ！ 17 </p> 18 19 <p> 20 <ruby> 21 魔法使<rp>(</rp><rt>まほうつかい</rt><rp>)</rp> 22 </ruby>「<ruby> 23 ファイアボール<rp>(</rp><rt>かえんだん</rt><rp>)</rp> 24 </ruby>！」 25 </p> 26 27 <p> 28 <ruby> 29 姫<rp>(</rp><rt>ひめ</rt><rp>)</rp> 30 </ruby>「ありがとう、<ruby> 31 英雄<rp>(</rp><rt>えいゆう</rt><rp>)</rp> 32 </ruby>！」 33 </p> 34</body> 35</html>
rp要素は、HTMLで漢字などの文字に読み仮名（ルビ）を振る際に使用される補助的な要素です。主に、ルビの親要素である<ruby>要素の中で利用されます。この要素の主な役割は、もしWebブラウザがルビの表示に完全に対応していない場合でも、ルビの開始と終了を区別するための括弧などの区切り文字を表示することです。
具体的には、<ruby>要素内に漢字などの基本となるテキストを記述し、その後に<rt>要素で読み仮名を指定します。このとき、<rp>要素は<rt>要素の前後に配置され、ルビ非対応のブラウザで読み仮名が通常のテキストとして表示される際に、その読み仮名を括弧で囲むなどの代替表現を提供します。一方で、ルビに完全に対応しているブラウザでは、<rp>要素の内容は表示されず、自然な形でルビが表示されるため、利用者には見えません。
サンプルコードでは、RPGゲームのセリフで漢字に読み仮名を振る例が示されています。「勇者」に対する読み仮名「ゆうしゃ」を例にとると、<ruby>勇者<rp>(</rp><rt>ゆうしゃ</rt><rp>)</rp></ruby>のように記述されています。これにより、ルビ非対応ブラウザでは「勇者(ゆうしゃ)」と表示され、ルビ対応ブラウザでは漢字の上に小さな文字で読み仮名が表示されるなど、ブラウザの機能に応じた適切な表現がなされます。このように、利用者の環境に関わらず、読み仮名の意味を分かりやすく伝えるための配慮として機能します。
このrp要素自体には特別な引数や戻り値はなく、マークアップの構造を補強し、幅広いWeb環境でのコンテンツの可読性を高める役割に特化しています。
rp要素は、ルビ（読み仮名）に対応していない古いブラウザや特定の環境において、読み仮名部分を括弧で囲んで表示するための要素です。現代のほとんどのブラウザはルビ表示に対応しているため、通常はrp要素内の括弧は画面に表示されません。しかし、古い環境での閲覧も考慮し、情報が正しく伝わるようにするための「もしも」の備えとして使われます。サンプルコードのように、ruby要素内でrt要素（読み仮名）を挟む形で記述することで、どのような環境でも意味を損なわずに情報が伝わるように互換性を高めることができます。必ずruby要素の内部で、rt要素と組み合わせて利用してください。
RPG風ルビ表示の作り方
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>RPG風ルビ表示サンプル</title> 7</head> 8<body> 9 <h1>RPGキャラクター/アイテム情報</h1> 10 11 <p> 12 <!-- 13 rp要素は、ruby要素（振り仮名などのルビ表示）を 14 サポートしないブラウザ向けに、ルビ文字の前後に追加する括弧などの記号を定義します。 15 サポートするブラウザではrp要素の内容は表示されません。 16 --> 17 キャラクター名: <ruby>勇者<rp>（</rp><rt>ゆうしゃ</rt><rp>）</rp></ruby> 18 </p> 19 20 <p> 21 職業: <ruby>魔法使い<rp>（</rp><rt>まほうつかい</rt><rp>）</rp></ruby> 22 </p> 23 24 <p> 25 装備品: <ruby>炎<rp>（</rp><rt>ほのお</rt><rp>）</rp></ruby>の<ruby>剣<rp>（</rp><rt>つるぎ</rt><rp>）</rp></ruby> 26 </p> 27</body> 28</html>
HTMLのrp要素は、ウェブページで振り仮名などのルビを表示する<ruby>要素を補完する役割を持ちます。その主な目的は、閲覧しているブラウザが<ruby>要素による高度なルビ表示をサポートしていない場合に、ルビテキストを区切るための括弧などの記号を表示することです。これにより、ルビ表示に対応しない環境でも、元のテキストとその読み方がセットで分かりやすくなります。
具体的には、<ruby>要素内でベースとなるテキストと、その読み方を示す<rt>要素（ルビテキスト）の間に配置されます。サンプルコードでは、「勇者」の読み方「ゆうしゃ」を<ruby>勇者<rp>（</rp><rt>ゆうしゃ</rt><rp>）</rp></ruby>のように記述し、<rp>要素で括弧を追加しています。モダンなブラウザでは、<rp>要素で囲まれた内容は表示されず、ベーステキストの上にルビテキストが適切に表示されます。一方で、ルビ表示をサポートしない古いブラウザでは、<rp>要素の内容（この場合は括弧）が表示され、「勇者（ゆうしゃ）」のように、ベーステキストとルビテキストが通常のテキストとして並んで表示される挙動となります。
rp要素には、設定できる特別な引数（属性）はありません。また、この要素はウェブページの構造を定義するHTML要素であるため、プログラミング言語の関数のように特定の値を「戻り値」として返すことはありません。RPGの世界観において、難読なキャラクター名やアイテム名にルビを振る際に、どのようなブラウザ環境でも読み方を伝えるための重要な配慮の一つと言えるでしょう。
rp要素は、振り仮名（ルビ）を表示するruby要素が、一部の古いブラウザや環境で正しく機能しない場合に備えるためのものです。ruby要素内で、ルビのテキストを囲む括弧などの記号を定義し、ルビがサポートされない環境でこれらの記号が本文に追加表示されるようにします。現代のほとんどのブラウザはruby要素を適切に解釈するため、rp要素に記述された内容は通常、ユーザーには表示されません。これは、ルビ非対応のブラウザでルビの読みが本文と混ざって読みにくくなることを防ぐための配慮です。RPGの登場人物名やアイテム名など、読み方が特殊な語句にルビを振る際に、表示の互換性を高める目的でrt要素の前後に配置して利用します。