[新着] Webテンプレートを仮オープンしました
このタグを指定すると、対象の文字にルビ(ふりがな)を付けることができます。
※W3Cで審議されていたものを、IEが独自に採用したようです。
<ruby>
<rb>亜米利加</rb>
<rp>(</rp>
<rt>アメリカ</rt>
<rp>)</rp>
</ruby>
上記の例の場合、亜米利加と書かれた部分が対象の文字で、アメリカと書かれた部分がルビになります。
rpタグで囲まれた ( と ) の部分は、未対応ブラウザで表示される内容です。rubyタグに対応しているブラウザでは、この部分は無視されます。| <ruby> 〜 </ruby> | 全体を指定 |
|---|---|
| <rb> 〜 </rb> | 対象の文字(ベーステキスト)を指定 |
| <rt> 〜 </rt> | ふりがな(ルビテキスト)を指定 |
| <rp> 〜 </rp> | 未対応ブラウザ向けの内容(カッコ)を指定 |
<ruby>
<rb>亜米利加</rb> … 対象文字
<rp>(</rp> … 未対応ブラウザで表示
<rt>アメリカ</rt> … ふりがな
<rp>)</rp> … 未対応ブラウザで表示
</ruby>
上記の内容をブラウザで見た場合、次のように表示されます。
| ■対応ブラウザでの表示例 | ……… |
ア メ リ カ
亜米利加 |
| ■未対応ブラウザでの表示例 | ……… | 亜米利加(アメリカ) |
※上記の例は、テーブルでそれっぽく見せたサンプルです。
![]()
ルビの部分をスタイルシートでアレンジすることができます。指定方法の詳細は「関連ページ」をご覧ください。
ルビの表示テストです。
<ruby><rb>仏蘭西</rb><rp>(</rp><rt>フランス</rt><rp>)</rp></ruby>
と
<ruby><rb>独逸</rb><rp>(</rp><rt>ドイツ</rt><rp>)</rp></ruby>
。
▼これをブラウザで見ると次のように表示されます