IEとNN同時にふりがなをふる

<RUBY>タグを利用すると、文字上にルビを振ることができますが、現状ではInternet Exploler（以下IE）5.0以上のバージョンだけで表示可能なため、他のブラウザではうまく表示されず、見にくくなってしまうことがあります。ここでは、IE5.0以上のブラウザの場合は単語上にルビを表示し、それ以外のブラウザの場合は単語横のカッコ内にふりがなを表示するように設定する方法を考えてみましょう。

■　ルビとふり仮名を表示するための設定

<RUBY>と<RT>タグを利用して、単語にルビを設定します。

<ruby>豊原大成　<RP>(</RP><RT>とよはら　だいじょう</RT><RP>)</RP></RUBY>

<RUBY>を利用できないブラウザでは、ふりがなを単語横のカッコ内に表示させるように<PR>タグを利用します。

IE5.0ijouno burauza deha,<RUBY>および<RT>タグを使って単語上にルビを表示することができますが、そのほかのブラウザではうまく表示することができません。この場合、上例のように<RUBY>と<RT>タグの間に<PR>タグで記号（カッコ）を囲むことで単語の横にふりがなを表示できます

■　スタイルシートの<RUBY>タグ属性

<RUBY>タグを利用してルビをふるときには、スタイルシートの属性を利用すると単語上での配置位置を次のように調整することができます。長い熟語などにルビをふるときには、見やすく表示できるので便利です。

属性	記述例	内容	表示例
left	<RUBY style＝"ruby-align:left">	ルビを左に配置する	紫陽花(あじさい)
center	<RUBY style＝"ruby-align:center">	ルビを中央に配置する	紫陽花(あじさい)
right	<RUBY style＝"ruby-align:right">	ルビを右に配置する	紫陽花(あじさい)
distribute-letter	<RUBY style＝"ruby-align:distribute-letter">	ルビを均等に割り付ける	紫陽花(あじさい)
distribute-space	<RUBY style＝"ruby-align:distribute-space">	両端にスペースを入れルビを均等に割り付ける	紫陽花(あじさい)
line-edge	<RUBY style＝"ruby-align:line-edge">	ルビが元の単語より短ければ中央に配置、長ければ左に配置する。	紫陽花(あじさい)

<<<戻る