<ruby> - ルビ

トップ > HTMLリファレンス > <ruby>

概要

項目説明
形式<ruby>~</ruby>
サポートH5 / e5 / Ch5 / Sa4.1 / Op26
カテゴリフローコンテンツ, フレージングコンテンツ, パルパブルコンテンツ
親要素フレージングコンテンツ を子要素として持てるもの
子要素rb, rt, rp, rtc要素, テキスト
タグの省略開始タグ:必須 / 終了タグ:必須

説明

ruby、rbrbcrprtrtc は、日本語などの言語で「ルビ」をふるための要素です。2001年5月31日にW3Cから勧告(http://www.w3.org/TR/ruby/)されました。rbc を除く要素は HTML5 でも採用されました。

シンプルな使用方法

ルビのシンプルな利用方法を下記に示します。rb はルビをふる対象(ルビボディ:Ruby Body)を、rt はルビのテキスト(ルビテキスト:Ruby Text)を意味します。ルビボディとルビテキストを rubyタグで囲みます。

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

ルビに対応したブラウザでは、次のように表示されます。

あ じ さ い
紫陽花

ルビ未対応ブラウザへの配慮

ルビに未対応のブラウザに対応するために、rp要素を用います。rp はルビ括弧(Ruby Parentheses)を意味します。

<ruby>
  <rb>紫陽花</rb>
  <rp>(</rp>
  <rt>あじさい</rt>
  <rp>)</rp>
</ruby>

ルビに対応したブラウザでは、rp要素は無視され、次のように表示されます。

あ じ さ い
紫陽花

ルビに対応していないブラウザでは、タグが無視され、次のように表示されます。

紫陽花(あじさい)

文字毎にルビを振る

下記の様にすることで、文字毎にルビをふることができます。ただし、この場合、ルビ未対応のブラウザでは「山やま田だ太た郎ろう」と表示されてしまいます。

<ruby>
 <rb>山</rb>
 <rt>やま</rt>
 <rb>田</rb>
 <rt>だ</rt>
 <rb>太</rb>
 <rt>た</rt>
 <rb>郎</rb>
 <rt>ろう</rt>
</ruby>

複雑な使用方法

rtcを用いることで、ひとつのルビ対象に、ふたつのルビをふることができます。

<ruby>
  <rbc>
   <rb>山</rb>
   <rb>田</rb>
   <rb>太</rb>
   <rb>郎</rb>
  </rbc>
  <rtc>
   <rt>やま</rt>
   <rt>だ</rt>
   <rt>た</rt>
   <rt>ろう</rt>
  </rtc>
  <rtc rbspan="4">
   <rt>Yamada Taro</rt>
  </rtc>
</ruby>

rbc はルビボディのコンテナ(Ruby Body Container)、rtc はルビテキストのコンテナ(Ruby Text Container)を示します。<ruby>~</ruby> の中には、ひとつの rbc要素と、ひとつかふたつの rtc要素を含みます。通常、ひとつ目の rtc は横書きの場合はルビの主体の上側、縦書きの場合はルビの主体の右側に表示されます。ふたつ目の rtc は横書きの場合はルビの主体の下側、縦書きの場合はルビの主体の左側に表示されます。rbspan属性には、対応する rb要素の数を指定します。

HTML5 では rbcは採用されていません。rbspan属性は採用されていません。

現時点(2015年1月)では、この方式をサポートしているブラウザはまだ少ないようです。

属性

【一般属性】
属性意味
accesskey=keyH4/e4/Ch2/Fx2/Sa3/Op12/N6/i1。アクセスキーを指定します。
class=classH4/e3/Ch1/Fx1/Sa1/Op1/N4。クラスを指定します。
contenteditable=boolH5/e55/Ch11/Fx3/Op10.6/Sa3.2。要素を編集可能にします。
dir=dirH4/e5/Ch5/Fx4/Sa6/Op25/N6。文字の表示方向を指定します。
hiddenH5/e/Ch/Fx/Sa/Op。要素を非表示にします。
id=idH4/e3/Ch/Fx/Sa/Op/N4。ID を指定します。
lang=langH4/e4/Ch/Fx/Sa/Op/N6。言語を指定します。
spellcheck=boolH5。スペルをチェックします。
style=styleH4/e3/Ch/Fx/Sa/Op/N4。スタイルシートを指定します。
tabindex=nH4/e4/Ch/Fx/Sa/Op/N6。タブインデックスを指定します。
title=titleH2/e2/Ch/Fx/Sa/Op/N6。タイトルを指定します。
translate=titleH5。翻訳可否を指定します。

使用例

HTML
<ruby>
 紫陽花
 <rp>(</rp>
 <rt>あじさい</rt>
 <rp>)</rp>
</ruby>
が咲いてます。
表示(対応ブラウザの場合:擬似)
あ じ さ い
紫陽花が咲いてます。

表示(対応ブラウザの場合:実例)
紫陽花 ( あじさい ) が咲いてます。

表示(対応ブラウザの場合:実例)
紫陽花(あじさい)が咲いてます。

関連項目

<rb><rbc><rp><rt><rtc>

Copyright (C) 2000-2015 杜甫々
初版:2000年10月9日 最終更新:2015年1月24日
http://www.tohoho-web.com/html/ruby.htm