<ruby></ruby>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
分類 フロー・コンテンツ / フレージング・コンテンツ / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容 次のグループを1つ以上配置:1つ以上のフレージング・コンテンツまたはrb要素、その後に1つ以上のrt要素またはrtc要素rp要素を使用する場合は、rt要素またはrtc要素の直前か直後に配置)

ruby要素は、ルビ(ふりがな)を振るテキストの範囲を表します。


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

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

<ruby>
<rb>漢</rb><rp>(</rp><rt>かん</rt><rp>)</rp>
<rb>字</rb><rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>

ruby要素は、テキストにルビを振りたい場合に使用します。この要素内にルビベース(対象のテキスト)を配置して、rt要素ルビテキスト(ふりがな)を指定します。また、必要に応じてrb要素rtc要素rp要素も使用することができます。

  • ruby要素 … ルビを振るテキストの範囲
  • rb要素 … ルビベース(対象のテキスト)を明示的に示す
  • rt要素 … ルビテキスト(ふりがなの文字列)
  • rtc要素 … ルビテキストのコンテナ
  • rp要素 … 未対応ブラウザで表示される括弧

次の例では、名字と名前にルビを振っています。

<p>私の名前は<ruby>山田<rt>やまだ</rt>太郎<rt>たろう</rt></ruby>です。</p>

上記は、対象のテキスト(山田と太郎)が暗黙的に示されています。(ruby要素の直接の子として配置されたテキストは、rb要素で囲まれているものとみなされます)

次の例は、rb要素を使って対象のテキストを明示的に示しています。(上記の例と次の例は意味的に同じです)

<p>
私の名前は
<ruby>
<rb>山田</rb>
<rt>やまだ</rt>
<rb>太郎</rb>
<rt>たろう</rt>
</ruby>です。
</p>

※分かりやすくすために改行を入れています。

この要素に対応しているブラウザでは、ルビテキストが次のように表示されます。

「山田」の上に「やまだ」、「太郎」の上に「たろう」と小さな文字で表示されます。

未対応ブラウザ向けの指定

ルビに対応していないブラウザでは、ルビテキストが次のように表示されてしまいます。

私の名前は山田やまだ太郎たろうです。

しかし、rp要素を使って次のように記述すると、ルビテキストが括弧付きで表示されるようになります。(rt要素の前後にrp要素を配置します)

<p>
私の名前は
<ruby>
山田<rp></rp><rt>やまだ</rt><rp></rp>
太郎<rp></rp><rt>たろう</rt><rp></rp>
</ruby>
です。
</p>

私の名前は山田(やまだ)太郎(たろう)です。

  • ルビに対応しているブラウザでは、rp要素の内容(括弧)は表示されません。

rp要素の詳細については、下記のページを参考にしてください。

ルビの振り方に関して

ルビの振り方を簡単に説明すると以上のようになりますが、実際にはかなり細かく規定されています。

以下は、より詳しく知りたい人向けの内容となります。

モノルビ

モノルビは、1文字ごとにルビを振りたい場合の書き方です。これは、文字ごとの読み方などを伝えたい場合に使用します。

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

※rb要素とrp要素は省略しています。
表示例
かん

煩雑な書き方となりますが、1文字ごとにruby要素を使用して次のように記述することもできます。

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

<ruby>
字<rt>じ</rt>
</ruby>
表示例
かん
  • これらの書き方は、主要なブラウザで対応しています。

グループルビ

グループルビは、テキスト全体にルビを振りたい場合の書き方です。これは、テキストの意味的な読み方などを伝えたい場合に使用します。

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

※rb要素とrp要素は省略しています。
表示例
今日きょう
  • この書き方は、主要なブラウザで対応しています。

熟語ルビ

熟語ルビは、1文字ごとにルビを振りつつも、それらを1つのグループとして扱いたい場合の書き方です。これは、文字ごとの読み方を伝えつつ、それをテキスト全体の読み方として表現したい場合に使用します。

<ruby>
<rb>朝</rb><rb>寝</rb><rb>坊</rb>
<rt>あさ</rt><rt>ね</rt><rt>ぼう</rt>
</ruby>

※この書き方ではrb要素が必要となります。
表示例
あさぼう

上記の例では、rb要素rt要素が3対3の関係になり、それぞれが暗黙的なコンテナ内に配置されているとみなされます。

このケースでは不要ですが、rt要素のコンテナを明示的に示すと次のようになります。(3つのrt要素rtc要素で囲んでいます)

<ruby>
<rb>朝</rb><rb>寝</rb><rb>坊</rb>
<rtc><rt>あさ</rt><rt>ね</rt><rt>ぼう</rt></rtc>
</ruby>

※rb要素のコンテナを表す要素(rbc要素)は、HTML5とHTML5.1では定義されていません。

rp要素を使用する場合は次のような配置となります。(最初のrt要素の直前と、最後のrt要素の直後にrp要素を配置します)

<ruby>
<rb>朝</rb><rb>寝</rb><rb>坊</rb>
<rp></rp><rt>あさ</rt><rt>ね</rt><rt>ぼう</rt><rp></rp>
</ruby>
表示例
あさぼう

未対応のブラウザでは次のような感じで表示されます。(Opera12の表示内容を擬似的に再現)

  • ただし、中途半端に対応しているブラウザでは表示が変になります。(ruby要素には対応しているけどこの書き方には未対応のブラウザ(具体的にはChrome55とSafari5))
表示例
朝寝坊 (あさねぼう)

ちなみに、モノルビrp要素を使った場合は 朝(あさ)寝(ね)坊(ぼう) のような感じで表示されます。

  • この書き方は、IEとFirefoxで対応しています。(2016年12月現在)

両側ルビ

両側ルビは、対象のテキストに対して2種類のルビを振ることができる書き方です。これは、読み方と意味の両方を伝えたい場合などに使用します。

次の例では、2種類のルビがrtc要素によって分離されています。

<ruby>
<rb>朝</rb><rb>寝</rb><rb>坊</rb>
<rt>あさ</rt><rt>ね</rt><rt>ぼう</rt>
<rtc>Oversleeping</rtc>
</ruby>

rt要素は暗黙的なコンテナ内に配置されているとみなされます。そして、rtc要素はルビテキストのコンテナを明示的に示します。

上記は、1つ目のルビあさねぼうは暗黙的なコンテナ内に、2つ目のルビOversleepingは明示的なコンテナ内に配置されていることになります。(2つのルビコンテナが置かれたことになります)

また、rtc要素の中には暗黙的にrt要素があるとみなされます。コンテナ内でrt要素を分割する必要がない場合は、上記の例のようにrtc要素内に直接テキストを記述します。

表示例
あさぼう Oversleeping

次の例では、rtc要素内に3つのrt要素を配置しています。

<ruby>
<rb>朝</rb><rb>寝</rb><rb>坊</rb>
<rt>あさ</rt><rt>ね</rt><rt>ぼう</rt>
<rtc><rt>asa</rt><rt>ne</rt><rt>bou</rt></rtc>
</ruby>
表示例
あさぼう asanebou

  • この書き方はFirefoxで対応しています。(2016年12月現在)

使用例

rb要素とrp要素を省略した例

<p>私の名前は<ruby>山田<rt>やまだ</rt>太郎<rt>たろう</rt></ruby>です。</p>

表示例

私の名前は山田やまだ太郎たろうです。

rb要素とrp要素を使用した例

<p>私の名前は<ruby><rb>山田</rb><rp>(</rp><rt>やまだ</rt><rp>)</rp><rb>太郎</rb><rp>(</rp><rt>たろう</rt><rp>)</rp></ruby>です。</p>

表示例

私の名前は山田やまだ太郎たろうです。

  • ruby要素に対応しているブラウザでは、どちらも同じように表示されます。