ルビの表示位置を指定する
CSSの書き方
ruby-position:値 ;
|
|||||||||||||||||||||||||||||||||||||||||
解説
HTMLにはrubyタグが用意されていて、漢字の上にルビをふることができます。「ruby-position」プロパティでは、このルビを表示する位置を調節することが出来ます。
値
「ruby-position」プロパティで設定できる値は2つです。初期値の「ruby-position:above;」とすると、通常のようにルビはルビをふりたい文字の上に表示されます。一方、「ruby-position:inline;」とすると、ルビは文字の後ろに表示されます。
CSSレベル3で採用予定
「ruby-position」プロパティは現在InternetExplorer独自のCSSとなっていて、IE以外のブラウザには対応していません。このプロパティはCSSレベル3で採用が予定されていますが、値については「aboveやinline」とは異なる値が設定されるそうです。
CSS/HTMLサンプル
ruby.ab { ruby-position:above; }
ruby.in { ruby-position:inline; }
ruby要素にクラスでルビの配置を指定 サンプル
