初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL13. IE独自拡張による設定　その3 ★ テキスト4 ルビをふる（IE5.0以降で有効）

ルビは、ふりたい部分をHTML上で<ruby></ruby>で囲み、その間に<rt>を用いて以下のように指定します。(ただし、<ruby>タグには対応していないブラウザもあります。)

ex.) <ruby>衝撃的<rt>しょうげきてき</ruby>

このような<ruby>要素に対して、ルビの配置を細かく指定するのが「ruby-align:」と「ruby-position」で、前者はルビの開始位置や文字間隔、後者はルビをテキストの上や横に出すか、テキストの直後に出すかを指定します。それぞれ指定できる<値>は以下の通りです。

�@) ruby-align: <値>;

auto ... ブラウザが判断（デフォルト / 日本語や中国語などは「distribute-space」、アルファベットには「center」を適用)

left ... ルビをふるテキストに対して左詰めで表示

center ... ルビをふるテキストに対して、センタリングして表示

right ... ルビをふるテキストに対して右詰めで表示

distribute-letter ... ルビをふるテキストに対して、均等割りする (ルビの方が長ければセンタリングされる)

distribute-space ... 前後にスペースを空けて、均等割りする (ルビの方が長ければセンタリングされる) 

line-edge ... ルビをふるテキストが行端にある場合、テキストとルビの終了位置を合わせて表示 

　(テキストが行端にある場合以外はセンタリングされる)

�A) ruby-position: <値>;

above ... 横書きの場合はルビをふるテキストの上、縦書きの場合は右に表示 

inline ... ルビをふるテキストの直後に表示

なお、サンプルのようにルビそのものに色を付けたり、書体やサイズを変えたい場合は、<rt>に対してCSSで以下のように設定を加えます。

rt { color: #f0f; font-size: 10pt; }

初級篇2.VOL13. IE独自拡張による設定・その3-3 <<

>> 初級篇2.VOL13. IE独自拡張による設定・その3-5