HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


ルビの表示位置を指定する

CSSの書き方

ruby-position:値 ;

CSSの詳細情報
プロパティ名 ruby-position 読み方 ルビー・ポジション
初期値 above 意味 ルビの配置位置を指定する
above/inline
対象 ruby要素
CSSレベル IE独自 対応ブラウザ Windows MAC
継承 しない IE 5.0以上 --

解説

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要素にクラスでルビの配置を指定 サンプル