ruby 要素

ruby 要素ルビをふられたテキスト

ruby 要素を使うことでフレージング・コンテンツにルビをふることができます。ruby 要素はルビをふられたテキストとなります。

ルビとは文章内の任意の文字に対するふりがな、説明、異なる読み方などの役割を持つ文字を、本文より小さな文字で、上部、下部に表示するものです。

カテゴリ

コンテンツモデル

以下の組からそれぞれ 1つ以上

この要素を使用できる文脈

フレージング・コンテンツが期待される場所

この要素で使用できる属性

日本語の場合、下記のサンプルのように単語ごとに ruby 要素でマークアップした上で、rt 要素を使用してルビを振るような使い方が考えられます。

<ruby>日<rt>に</rt>本<rt>ほん</rt>語<rt>ご</rt></ruby>で
<ruby>書<rt>か</rt></ruby>いた
<ruby>作<rt>さく</rt>文<rt>ぶん</rt></ruby>です。

ルビに対応した標準的なブラウザでは下記の画像のように表示されるでしょう。

ruby 要素でマークアップした文章の表示サンプル

下記は実際にマークアップした例です。対応ブラウザで閲覧している場合はルビが表示されます。

日に本ほん語ごで書かいた作さく文ぶんです。

ruby 要素が入れ子で記述される場合のサンプルソースは下記のようになります。

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

対応ブラウザで閲覧している場合は 2種類のルビが表示されます。

東とう南なんたつみの方角

これは、下記のように日本語と英語でそれぞれ読み仮名を付けたい場合などにも利用できます。

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

対応ブラウザで閲覧している場合は日本語と英語、2種類のルビが表示されます。

東とう南なんSoutheastの方角

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

<p>
  <ruby>日<rt>に</rt>本<rt>ほん</rt>語<rt>ご</rt></ruby>で
  <ruby>書<rt>か</rt></ruby>いた
  <ruby>作<rt>さく</rt>文<rt>ぶん</rt></ruby>です。
</p>