ルビをふる(<ruby>)

トップ > How To > ルビをふる(<ruby>)

説明

IE5.0では日本語のなどのルビ用のタグ<ruby>が追加されました。これによって、日本語にルビをふることができるようになりました。

実例

あ じ さ い
紫陽花が咲いてる。

※ 未対応のブラウザでもイメージを確認できるように、<ruby>を使用しない方法で表示しています。

ソースコード

上記の実例のHTMLコードは次のようになります。

<ruby>
<rb>紫陽花</rb>
<rp>(</rp>
<rt>あじさい</rt>
<rp>)</rp>
</ruby>
が咲いてる。

<rp>~</rp>は、<ruby>に未対応のブラウザへの配慮で追加されたタグです。対応ブラウザはこの部分を無視します。これにより、未対応ブラウザであっても、「紫陽花あじさいが咲いてる。」とはならずに、「紫陽花(あじさい)が咲いてる。」のように表示されます。

以下のように<rb>や</rt>などを省略することもできます。

<ruby>紫陽花<rp>(<rt>あじさい<rp>)</ruby>が咲いてる。

補足

<ruby>は、日本が中心となって提案し、1995年5月にW3Cのワーキングドラフトとなりました。仕様書は下記から入手可能です。

ルビに関連するスタイルシートプロパティとして、IE5.0にはruby-alignruby-overhangruby-positionも実装されました。ルビを表示する位置などを指定することができます。

IE5.0では、<rb>の実装をサボっている(もしくは、IE5.0が実装した頃にはまだ<rb>が定義されていなかった?)ようです。<rb>にスタイルシートを指定しても無視されてしまいます。


Copyright (C) 1998 杜甫々
1998年6月27日
http://www.tohoho-web.com/wwwxx040.htm