<ruby>ルビをふる

<ruby>タグは、文字にルビ(ふりがな)を振るための要素です。 ruby要素内に<rt>、<rp>タグなどを使用しマークアップします。

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

HTML5での変更点

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

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

書式

  • <ruby 属性="値">~</ruby> ……… ルビ(ふりがな)を振る

使用した時の例

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

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

ブラウザ上の表示例

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

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

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

形式 <ruby>~</ruby> カテゴリ フローコンテンツ, フレージングコンテンツ, パルパブルコンテンツ
親要素 フレージングコンテンツが期待される場所 子要素 rb, rt, rp, rtc
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Opera26~ , Safari5.1~