ルビ関連の要素
HTML5ではルビ関連の要素も追加されています。
ruby要素
- カテゴリー：フローコンテンツ、フレージングコンテンツ
- この要素が使える文脈：フレージングコンテンツが予想される場所
- コンテンツモデル：次のグループを1つ以上。フレージングコンテンツに続くrt要素のグループ、フレージングコンテンツに続くrp要素 rt要素 rp要素のグループ
- コンテンツ属性：グローバル属性
ruby要素は、rt要素やrp要素と合わせて使うことで、フレージングコンテンツにルビを振れます。
<ruby>
浜<rp>(</rp><rt>はま</rt><rp>)</rp>
俊<rp>(</rp><rt>しゅん</rt><rp>)</rp>
太<rp>(</rp><rt>た</rt><rp>)</rp>
朗<rp>(</rp><rt>ろう</rt><rp>)</rp>
</ruby>
ruby要素は、単体では使わずに、rt要素やrp要素と組み合わせて使います。rt要素とrp要素に関しては、それぞれの項目で解説します。
rt要素
- カテゴリー：なし
- この要素が使える文脈：ruby要素の子要素として
- コンテンツモデル：フレージングコンテンツ
- コンテンツ属性：グローバル属性
rt要素は、ruby要素と合わせて使うことで、フレージングコンテンツにルビを振る要素です。フレージングコンテンツに続けてrt要素を記述すると、直前のフレージングコンテンツに対するルビになります。
<ruby>
浜<rt>はま</rt>
俊<rt>しゅん</rt>
太<rt>た</rt>
朗<rt>ろう</rt>
</ruby>
ruby要素に対応しているブラウザーでは次のように表示されます。
ルビは一文字ずつではなく、単語単位でも振れます。
<ruby>
浜<rt>はま</rt>
俊太朗<rt>しゅんたろう</rt>
</ruby>
対応ブラウザーでは、次のように表示されます。
モノルビとグループルビ
1つめの例のように一文字ずつに振られたルビを「モノルビ」、2つめの例のように単語単位で振られたルビを「グループルビ」と言います。教科書や教材ではモノルビ、熟字訓や当て字にはグループルビが使われることが多いようです。
rp要素
- カテゴリー：なし
- この要素が使える文脈：ruby要素の子要素で、rt要素の直前か直後
- コンテンツモデル：フレージングコンテンツ
- コンテンツ属性：グローバル属性
rp要素は少し特殊な要素で、ruby要素に対応していない環境で、ルビの前後に表示したい内容をrt要素の前後に記述します。ruby要素に対応しているブラウザーでは無視され、何も表示されませんが、ruby要素に未対応のブラウザーでは、rt要素の前後にrp要素の内容が表示されます。
コンテンツモデルはフレージングコンテンツとなっていますが、rp要素の内容には括弧を入れるのが自然でしょう。実際には以下のように使います。
<ruby>
浜<rp>(</rp><rt>はま</rt><rp>)</rp>
俊<rp>(</rp><rt>しゅん</rt><rp>)</rp>
太<rp>(</rp><rt>た</rt><rp>)</rp>
朗<rp>(</rp><rt>ろう</rt><rp>)</rp>
</ruby>
ruby要素に対応しているブラウザーでの表示
ruby要素に対応していないブラウザーでの表示
なお、特に私的な文書などで、文章の最後に閉じ括弧が来る場合に、閉じ括弧を省略する書き方がありますが、rp要素では最後を省略できません。rp要素を使う場合は、rt要素の「前後」に必要です。
誤った例
<ruby>
浜俊太朗
<rp>(</rp><rt>はましゅんたろう</rt>
</ruby>
正しい例
<ruby>
浜俊太朗
<rp>(</rp><rt>はましゅんたろう</rt><rp>)</rp>
</ruby>
次回は、HTML5で新しく追加されたフォーム関連の要素を解説します。
著者：浜 俊太朗 （はま・しゅんたろう）
NHN Japanで働くマークアップエンジニア／ディレクター。
ブログ「hamashun.me」はコーディングに限定せずさまざまな話題を扱っている。主な著書に「一週間でマスターするXHTML & CSS for Windows」（毎日コミュニケーションズ刊）がある。趣味はカメラとネットゲームと椅子。
