【HTML Living Standard】rt要素の使い方
rt要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
rtオブジェクトは、HTMLドキュメント内でルビ注釈のルビテキスト（振り仮名や説明文）を表すオブジェクトです。これは、主に東アジアの言語、特に日本語の漢字などの表意文字に対して、その読み方や短い補足説明を付加するために使用されます。例えば、「東京」という漢字に「とうきょう」という読みを付けたい場合に、<ruby>東<rt>とう</rt>京<rt>きょう</rt></ruby>のように記述することで、ベーステキスト（元の文字）に振り仮名を付与できます。
rt要素は、必ず<ruby>要素の内部に配置され、ルビのベーステキストの直後に続くのが一般的な使用方法です。場合によっては、ルビ注釈の開始と終了を示すための括弧を意味する<rp>要素と組み合わせて使用することもありますが、多くの現代的なブラウザでは<rp>要素がなくても適切に表示されます。
ブラウザは通常、rt要素に含まれる内容を、親要素であるベーステキストの真上または真下に、より小さなフォントサイズで表示します。この機能は、視覚的な情報だけでなく、スクリーンリーダーなどの補助技術を利用するユーザーにとっても非常に重要です。rt要素を適切に使用することで、読み上げソフトがルビテキストを正確に解釈し、コンテンツのアクセシビリティを向上させる役割を果たします。この要素は、HTML Living Standardの一部として定義されており、多言語コンテンツの表現を豊かにするために不可欠な要素の一つです。
構文(syntax)
1<rt>ルビテキスト</rt>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
rt要素とRTLのデモンストレーション
1<!DOCTYPE html> 2<html lang="he" dir="rtl"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>rt要素とRTLのサンプル</title> 7</head> 8<body> 9 <h1>rt要素とRTLのデモンストレーション</h1> 10 <p> 11 <!-- ruby要素は、基本テキスト（親文字）とそのルビテキスト（注釈）を組み合わせます --> 12 <!-- rt要素は、ruby要素内でルビテキスト（注釈）を指定するために使用されます --> 13 <!-- このHTMLドキュメントは、dir="rtl"（右から左）に設定されているため、テキストは右から左に表示されます --> 14 <ruby> 15 שלום <!-- 基本テキスト: ヘブライ語で「シャローム」（こんにちは） --> 16 <rt>שָׁלוֹם</rt> <!-- ルビテキスト: 発音ガイド --> 17 </ruby> 18 ، ברוך הבא לעולם ה-HTML! <!-- ヘブライ語で「ようこそ、HTMLの世界へ！」 --> 19 </p> 20</body> 21</html>
このHTMLサンプルコードは、rt要素と、テキストの書き込み方向を右から左へ指定するdir="rtl"属性の使い方を示しています。
rt要素は、ruby要素の内部で使用される要素で、基本となるテキスト（親文字）に対するルビテキスト（注釈や発音ガイド）を定義します。例えば、漢字の読み仮名のように、特定の文字の上に小さな文字で情報が付加される場合に利用されます。この要素自体には、設定する引数や返される戻り値はありません。
サンプルコードでは、HTMLドキュメントのルート要素である<html>にlang="he"とdir="rtl"が指定されています。lang="he"はドキュメントの言語がヘブライ語であることを示し、dir="rtl"はドキュメント全体のテキストの表示方向が「右から左」（Right-to-Left）であることを指定しています。ヘブライ語やアラビア語などの言語は右から左に記述されるため、この属性を用いることでテキストが正しく表示されます。
具体的な例として、<ruby>שלום<rt>שָׁלוֹם</rt></ruby>の部分があります。「שלום」（ヘブライ語で「こんにちは」）が基本テキストであり、その上に<rt>שָׁלוֹם</rt>で指定された発音ガイドがルビテキストとして表示されます。このように、rt要素は、特に東アジアの言語などで用いられるルビ機能を、HTML上で実現するために重要な役割を果たします。
rt要素は、ruby要素の内部で、親文字の読み仮名や注釈（ルビテキスト）を記述するために使用する要素です。単独では機能せず、必ずruby要素と組み合わせて使ってください。このサンプルコードでは、html要素にdir="rtl"属性が設定されており、これによりドキュメント全体のテキストの表示方向が「右から左」に変更されています。ヘブライ語やアラビア語など、右から左に書く言語に対応する場合に必要となります。dir属性は、lang属性（言語指定）とセットで使うことで、ブラウザに言語と表示方向を正しく伝え、適切なレンダリングやアクセシビリティを確保できます。多言語対応のウェブページを開発する際は、これらの属性を適切に設定し、表示や読み上げ機能が意図通りに動作するか必ず確認してください。
HTMLのrt要素とRTL方向の指定
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>RT Element with RTL Direction Example</title> 7</head> 8<body> 9 10 <!-- 11 <rt>要素は、<ruby>要素内のベーステキストにルビテキスト（注釈）を提供します。 12 このサンプルコードは、右書き（RTL: Right-to-Left）の文脈での使用例を示します。 13 --> 14 15 <p> 16 標準的なルビの例（左書き: Left-to-Right）: 17 <ruby> 18 漢字<rt>かんじ</rt> 19 </ruby> (Kanji) 20 </p> 21 22 <p dir="rtl"> 23 <!-- dir="rtl"属性をこの段落に適用することで、その内容は右から左へレンダリングされます。 --> 24 これは右から左への文脈で<ruby> 25 مرحبا<rt>مَرْحَبًا</rt> 26 </ruby> (こんにちは) を示しています。 27 <!-- <rt>要素は、ベーステキストの発音や注釈を提供します。 --> 28 </p> 29 30</body> 31</html>
rt要素は、HTMLのruby要素内で使用される特別な要素です。その主な役割は、ベースとなるテキストに対して、ルビテキスト、つまり読み方や短い注釈を提供することにあります。これにより、特に日本語の漢字など、複雑な文字の読み方を視覚的に分かりやすく示すことができます。
この要素自体は、特定の引数を取ったり、値を返したりするものではありません。rtタグの開始タグと終了タグの間に記述された内容がそのままルビテキストとして扱われ、ブラウザによって適切にレンダリングされます。
サンプルコードでは、まず一般的な左書き（LTR: Left-to-Right）の文脈で「漢字」に「かんじ」というルビを振る例が示されています。さらに、dir="rtl"属性が適用された段落内での使用例も含まれています。dir="rtl"属性は、その要素内のテキストの表示方向を右から左（RTL: Right-to-Left）に指定します。この例では、アラビア語の「مرحبا」に対して「مَرْحَبًا」というルビが振られています。このように、rt要素はテキストの表示方向（LTRかRTLか）に影響されず、ベーステキストへの注釈という純粋な役割を果たすため、多言語対応のウェブページでも一貫して機能します。
rt要素は、必ず<ruby>要素の子要素として使用し、ベーステキストに対する注釈（ルビ）を提供します。単独で使用しても意図した効果は得られませんので注意してください。dir="rtl"属性は、その要素および子要素のテキストの表示方向を右から左へ変更するものです。このサンプルコードでは、段落全体にdir="rtl"を適用することで、アラビア語などの右書き言語の文脈で<ruby>要素と<rt>要素が正しく表示される様子を示しています。多言語対応（国際化）において非常に重要な概念であり、特にアラビア語やヘブライ語のような右書き言語のコンテンツを扱う際に不可欠です。ルビの表示はブラウザやOSによって見た目が異なる場合があるため、複数の環境での動作確認を推奨いたします。また、正しいlang属性と組み合わせることで、アクセシビリティも向上し、より適切な表示や音声読み上げが期待できます。