ruby要素

ruby要素は、ルビを振るテキストの範囲を指定する要素。

カテゴリー フロー・コンテンツ、フレージング・コンテンツ、パルパブル・コンテンツ。
コンテキスト フレージング・コンテンツを内包できる要素内で使用できる。
コンテンツ・モデル １つ以上のフレージング・コンテンツ。
１つ以上のrt要素。
属性 グローバル属性。
ブラウザ対応

構文

<ruby>ルビを振るテキスト<rt>ルビ</rt></ruby>

要点

  • ruby要素は、ルビを振るテキストの範囲を指定する要素である。
  • 主に、漢字にふりがなを付けるときに使う。
  • ルビテキスト自体は、rt要素で括る。
  • ruby要素に対応していないブラウザ対策は、rp要素を併用することで可能だ。
  • ruby要素は、HTML5にて新たに導入された要素である。

サンプルコード

モノ・ルビ

文字毎に個別に指定する。

<ruby>漢<rt>かん</ruby><ruby>字<rt>じ</ruby>

<ruby>漢<rt>かん</rt></ruby><ruby>字<rt>じ</rt></ruby>

<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>

対応ブラウザは、ruby要素対応ブラウザのモノ・ルビの表示と表示する。

未対応ブラウザは、ruby要素未対応ブラウザのモノ・ルビの表示と表示する。

グループ・ルビ

<ruby>今日<rt>きょう</ruby>

<ruby>今日<rt>きょう</rt></ruby>

対応ブラウザは、ruby要素対応ブラウザのグループ・ルビの表示と表示する。

未対応ブラウザは、ruby要素未対応ブラウザのグループ・ルビの表示と表示する。

未対応ブラウザ対策あり

<ruby>漢<rp>（</rp><rt>かん</rt><rp>）</rp>字<rp>（</rp><rt>じ</rt><rp>）</rp></ruby>

対応ブラウザは、ruby要素対応ブラウザの表示と表示する。

未対応ブラウザは、ruby要素未対応ブラウザの表示と表示する。

サンプル

未対応ブラウザ対策なし

HTMLソースコード
<p><ruby>漢<rt>かん</ruby><ruby>字<rt>じ</ruby></p>
<p><ruby>漢<rt>かん</rt></ruby><ruby>字<rt>じ</rt></ruby></p>
<p><ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby></p>
<p><ruby>今日<rt>きょう</ruby></p>
<p><ruby>今日<rt>きょう</rt></ruby></p>
実際の表示

漢かん字じ

漢かん字じ

漢かん字じ

今日きょう

今日きょう

未対応ブラウザ対策あり

HTMLソースコード
<p><ruby>漢<rp>(</rp><rt>かん</rt><rp>)</rp>字<rp>(</rp><rt>じ</rt><rp>)</rp></ruby></p>
実際の表示

漢（かん）字（じ）