ルビ（ふりがな）を振る

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要素内に直接テキストを記述します。

次の例では、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>

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