<rt>ルビのテキスト

<rt>タグは、<ruby>内に記述する要素で、ルビ(ふりがな)として振られたテキスト(Ruby Text)を表します。

使い方はルビを振りたい部分全体をruby要素で囲み、ルビを振る各文字のあとにrt要素でルビを指定します。 またrp要素(Ruby Parentheses)は、ruby要素に対応していないブラウザでルビの前後に括弧等の記号を表示するために使用します。

単一ルビの場合はruby要素内に、複合ルビの場合はrtc要素内にrt要素を配置して下さい。 1文字ずつルビを振りたい場合は、文字ごとにrt要素を指定する事で表示位置を制御することができます。

HTML5での変更点

ruby要素はw3cで審議していたものをInternet Explorerが先行採用し、その後HTML5で採用されたものとなります。 ただしHTML5では使い方が異なります。

Internet Explorerのruby要素は漢字に対してrb要素を使用し、ルビに対してrt要素を使っていました。 ですがHTML5では、rb要素を省略することができ、rt要素だけでルビを振る事ができるようになりました。

書式

  • <rt 属性="値">~</rt> ……… ルビとして振るテキストを指定

使用した時の例

<ruby>
鎌<rt>かま</rt>
倉<rt>くら</rt>
時<rt>じ</rt>
代<rt>だい</rt>
</ruby>

<ruby>
<rb>鎌倉時代</rb>
  <rp>(</rp>
  <rt>かまくらじだい</rt>
  <rp>)</rp>
</ruby>

ブラウザ上の表示例

かまくらだい
鎌倉時代 ( かまくらじだい )

※ルビに未対応のブラウザでは、鎌倉時代(かまくらじだい)というように表示されます。(rp要素で記号を指定した場合)

対応ブラウザなどのデータ

形式 <rt>~</rt> カテゴリ なし
親要素 ruby, rtc要素 子要素 フレージングコンテンツ
開始タグ 必須 終了タグ 省略可能
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Safari5.1~