★HTML Living Standard リファレンス

<ruby> …… ルビ注釈を表す

<ruby>タグは、ルビ注釈を表す際に使用します。

ルビ注釈とは、ベーステキストに添えて表示される短いテキストのことです。
日本語の場合には、フリガナを振る際にも使用されます。

ruby要素とrt要素は、さまざまな種類の注釈に使用できます。
ベーステキストの内容に注釈を添えたり、その部分の発音を示したり、漢字にフリガナを振ったりできます。

ruby​​要素のスタイル制御

現時点2023年4月時点ではまだ、HTMLのruby​​要素のスタイルを
CSSで完全に制御する方法は提供されていません。
やがてCSSが拡張されて、仕様通りのスタイルに指定できる方法がサポートされることが期待されます。

■使用例

以下のサンプルは、漢字１文字ごとにそれぞれruby要素にしたものと、
漢字２文字をまとめて１つのruby要素にしたものです。
どちらも正しい書き方です。

<p>
<ruby>君<rt>くん</rt></ruby><ruby>子<rt>し</rt></ruby>は
<ruby>和<rt>わ</rt></ruby>して<ruby>同<rt>どう</rt></ruby>ぜず。
</p>

<p>
<ruby>君<rt>くん</rt>子<rt>し</rt></ruby>は
<ruby>和<rt>わ</rt></ruby>して<ruby>同<rt>どう</rt></ruby>ぜず。
</p>

■使用例

以下のサンプルは、熟語単位で１つのruby要素に指定して、漢字のふりがなを振っています。

<ruby>鬼<rt>き</rt>門<rt>もん</rt></ruby>の
<ruby>方<rt>ほう</rt>角<rt>がく</rt></ruby>を
<ruby>凝<rt>ぎょう</rt>視<rt>し</rt></ruby>する

■使用例

以下のサンプルは、漢字の単語に対応するカタカナが注釈として与えられています。

<ruby>境界面<rt>インターフェース</ruby>

■使用例

以下のサンプルは、漢字の単語に対応する英訳が注釈として与えられています。

<ruby lang="ja">編集者<rt lang="en">editor</ruby>

■使用例

以下のサンプルは、漢字で書いた花の読み方を指定しています。
どの字がどの発音ということではなく、「紫陽花」の３字で「あじさい」と読みます。

<ruby>紫陽花<rt>あじさい</ruby>

■使用例

以下のサンプルは、１つのベーステキストに２つのルビ注釈を指定しています。

<ruby>鬱金香<rt>うっこんこう<rt>チューリップ</ruby>

■使用例

以下のサンプルは、２つのルビ注釈でシンボルマークの英語とフランス語の名前を与えています。

<ruby>
 ♥ <rt> Heart <rt lang=fr> Cœur </rt>
 ☘ <rt> Shamrock <rt lang=fr> Trèfle </rt>
 ✶ <rt> Star <rt lang=fr> Étoile </rt>
</ruby>

■使用例

以下のサンプルでは、ruby​​要素を入れ子にして、読み方と意味の両方がルビ注釈で示されています。
内側のruby要素は、読み方をルビ注釈として与えています。
外側のruby要素は、意味をルビ注釈として与えています。

<ruby>
 <ruby>東<rt>とう</rt>南<rt>なん</rt></ruby>
 <rt>たつみ</rt>
</ruby>の方角

■使用例

以下のサンプルは上記サンプルと同じような使用例ですが、意味を英語で与えています。

<ruby>
 <ruby>東<rt>とう</rt>南<rt>なん</rt></ruby>
 <rt lang=en>Southeast</rt>
</ruby>の方角

■使用例

以下のサンプルでは、ruby​​要素を入れ子にして、言語の簡単な説明と、”HT”、”M”、”L”の正式名称がルビ注釈で示されています。

<ruby>
 <ruby>HT<rt>Hypertext</rt>M<rt>Markup</rt>L<rt>Language</rt></ruby>
 <rt>ドキュメントとアプリケーションを記述するための抽象言語
</ruby>

■関連項目