ルビ(ふりがな)を付ける

[新着] Webテンプレートを仮オープンしました


<ruby><rb><rp><rt>

ブラウザ
Internet Explorer5
タイプ
インライン要素 (独自拡張)

このタグを指定すると、対象の文字にルビ(ふりがな)を付けることができます。

※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>

これをブラウザで見ると次のように表示されます

ルビの表示テストです。 仏蘭西フランス独逸ドイツ


[特集] レンタルサーバー比較 & サーバー選びのチェックポイント

サイト内検索について - ベーシック版