このページの本文へ

もうこれで迷わないHTML5新要素の使い方 (3/3)

2012年03月23日 11時00分更新

文●浜 俊太朗/NHN Japan

  • この記事をはてなブックマークに追加
本文印刷

ルビ関連の要素

 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>
ss/ruby_01.png

ruby要素に対応しているブラウザーでの表示

ss/ruby_03.png

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」(毎日コミュニケーションズ刊)がある。趣味はカメラとネットゲームと椅子。

前へ 1 2 3 次へ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く