| 項目 | 説明 |
|---|---|
| 形式 | <ruby>〜</ruby> |
| サポート | H5+ / e5+ / Ch5+ / Sa4.1+ |
| タグの省略 | 開始タグ:必須、終了タグ:必須 |
| 包含可能要素 | rb / rbc / rp / rt/ rtc |
ruby、rb、rbc、rp、rt、rtc は、日本語などの言語で「ルビ」をふるための要素です。2001年5月31日にW3Cから勧告(http://www.w3.org/TR/ruby/)されました。一部の仕様は 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>
<rbc>
<rb>山</rb>
<rb>田</rb>
<rb>太</rb>
<rb>郎</rb>
</rbc>
<rtc>
<rt>やま</rt>
<rt>だ</rt>
<rt>た</rt>
<rt>ろう</rt>
</rtc>
<rtc>
<rt rbspan="4">凸凹会社社長</rt>
</rtc>
</ruby>
rbc はルビボディのコンテナ(Ruby Body Container)、rtc はルビテキストのコンテナ(Ruby Text Container)を示します。<ruby>〜</ruby> の中には、ひとつの rbc要素と、ひとつかふたつの rtc要素を含みます。通常、ひとつ目の rtc は横書きの場合はルビの主体の上側、縦書きの場合はルビの主体の右側に表示されます。ふたつ目の rtc は横書きの場合はルビの主体の下側、縦書きの場合はルビの主体の左側に表示されます。rbspan属性には、対応する rb要素の数を指定します。複雑な使用方法では、rp要素は使用することができません。
ただし、この使用方法は、サポートしているブラウザは少なく、HTML5 でも採用の予定が無く、未対応ブラウザへの配慮も困難なため、使用するのは避けたほうがよさそうです。
HTML5では、rb、rbc、rtc を除く、ruby, rp, rt の3つのタグが採用される予定です。<ruby>〜</ruby> に囲まれ、rp要素でも rt要素でも無いテキストがルビボディであることは明確なため、rb要素は不要と判断されたのかもしれません。
<ruby> 紫陽花 <rp>(</rp> <rt>あじさい</rt> <rp>)</rp> </ruby>
| 属性 | 意味 |
|---|---|
| class=class | H5+/e5+。クラスを指定します。 |
| id=id | H5+/e5+。ID を指定します。 |
| style=style | H5+/e5+。スタイルシートを指定します。 |
| title=title | H5+/e5+。タイトルを指定します。 |
| dir=dir | H5+/e5+。文字の表示方向を指定します。 |
| lang=lang | H5+/e5+。言語を指定します。 |
| accesskey=key | H5+。アクセスキーを指定します。 |
| tabindex=n | H5+。タブインデックスを指定します。 |
| contenteditable=bool | H5+/e55+。要素を編集可能にします。 |
| contextmenu=id | H5+。コンテキストメニューを指定します。 |
| draggable=bool | H5+。ドラッグを可能にします。 |
| dropzone=value | H5+。ドロップを可能にします。 |
| hidden | H5+。要素を非表示にします。 |
| spellcheck=bool | H5+。スペルをチェックします。 |
| IE拡張属性 | 他にもIEで拡張された属性が指定可能です。 |
| HTMLソース |
|---|
<ruby> 紫陽花 <rp>(</rp> <rt>あじさい</rt> <rp>)</rp> </ruby> が咲いてます。 |
| ブラウザ表示例(対応ブラウザの場合:模倣) |
|---|
|
あ じ さ い
紫陽花が咲いてます。
|
| ブラウザ表示例(対応ブラウザの場合:実例) |
|---|
|
|
| ブラウザ表示例(未対応ブラウザの場合) |
|---|
| 紫陽花 ( あじさい ) が咲いてます。 |