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

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

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

さらに詳細な説明を見る

サンプルソースを見る

ruby 要素の仕様

カテゴリ
コンテンツモデル

下記のいずれか、もしくは両方

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

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

この要素で使用できる属性
DOM インタフェース
Uses HTMLElement.

詳細説明

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

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

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

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

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

ほんいたさくぶんです。

ruby 要素のサンプルソース

<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>

W3C HTML5 仕様書

4.6.20 The ruby element