【HTML Living Standard】rtc要素の使い方
rtc要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
rtcオブジェクトは、HTMLのルビ機能において、ルビテキストやルビ括弧をグループ化するための要素を表すオブジェクトです。この要素は、主に日本語や中国語などの東アジア言語において、漢字などのベースとなる文字の読み方や意味を示す「ルビ」（振り仮名やピンインなど）をWebページに表示する際に使用されます。
rtc要素は、親要素である<ruby>要素の内部で利用され、ルビの構造をより詳細に定義することを可能にします。特に、複数の文字に対して一つのルビを付ける「グループルビ」や、熟語全体にルビを付ける場合など、複雑なルビの表示を柔軟に実現するために不可欠です。具体的には、ルビのテキスト自体を記述する<rt>要素や、ルビに対応していないブラウザでルビを括弧で表示するための<rp>要素などを、このrtc要素の中にまとめて配置します。
これにより、ベーステキストとルビの対応関係を正確に表現し、視覚的な情報伝達だけでなく、検索エンジンやスクリーンリーダーなどに対しても適切な情報を提供し、Webコンテンツのアクセシビリティと表現力を向上させる役割を担っています。HTML Living Standardで定義されており、多言語対応のWebサイト構築において重要な要素の一つです。
構文(syntax)
1<ruby> 2 ベーステキスト 3 <rtc> 4 <rt>ルビテキスト</rt> 5 </rtc> 6</ruby>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML rtc要素でルビ注釈をグループ化する
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>HTML rtc要素のサンプル</title> 7</head> 8<body> 9 <!-- 10 <rtc>要素は、HTMLのルビ注釈において、複数のルビテキスト（<rt>要素）をグループ化するためのコンテナです。 11 特に、一つの親文字に対して複数の読み方や翻訳を示したい場合に役立ちます。 12 --> 13 <ruby> 14 <!-- 親文字（ルビを振る対象のテキスト） --> 15 花子 16 <!-- 複数のルビテキストを格納するコンテナ --> 17 <rtc> 18 <!-- 最初のルビテキスト（一般的な読み方） --> 19 <rt>はなこ</rt> 20 <!-- 2番目のルビテキスト（別の読み方や意味、例えば英語での説明など） --> 21 <rt lang="en">Hanako</rt> 22 </rtc> 23 </ruby> 24</body> 25</html>
HTMLの<rtc>要素は、ルビ（ふりがなや注釈）を表示するための<ruby>要素内で使用される、特定の役割を持つコンテナ要素です。この要素の主な目的は、一つの親文字に対して複数のルビテキスト（<rt>要素）をグループ化することにあります。例えば、漢字に日本語の読み方と英語の翻訳の両方を同時に付与したい場合など、複数の注釈を一つの文字に紐付けたい場合に非常に役立ちます。
サンプルコードでは、「花子」という親文字に対して、一般的な日本語の読み方である「はなこ」と、英語での表現である「Hanako」の二つのルビテキストが記述されています。これらの複数のルビテキストは、<rtc>要素によってまとめられています。これにより、ブラウザは「花子」に対して複数のルビ情報を適切に処理し、表示することができます。
<rtc>要素自体は特定の引数を受け取らず、何かを返すといった戻り値もありません。単体で意味を持つのではなく、必ず<ruby>要素の内部で、複数の<rt>要素をまとめるために使用される構造的な要素です。この要素を理解することで、文書構造を豊かにし、国際化対応を含めた柔軟なテキスト表現が可能になります。
rtc要素は、HTMLのルビ注釈において、複数のルビテキスト（<rt>要素）をグループ化する際に利用します。この要素は必ず<ruby>要素の子要素として配置し、その中に一つ以上の<rt>要素を内包することが必須です。単独での使用や、<ruby>要素以外の子要素として利用すると、期待通りに機能しませんので注意してください。主に一つの親文字に対して複数の読み方や翻訳を対応させたい場合に有効ですが、単純な単一のルビテキストであれば<ruby>要素内に直接<rt>を記述すれば十分です。比較的新しい要素のため、一部の古いブラウザでは表示が正しくない可能性があり、互換性を考慮することも重要です。この要素は、複雑なルビ表現をよりセマンティックに記述するために用いられます。