さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【CSS3】ルビの装飾(ruby-position、ruby-align、ruby-overhang)

Pocket
LINEで送る

ルビの装飾に関するCSS3のプロパティをご紹介します。

◆ ruby-position
ルビの表示位置を指定するプロパティです。

【使用例(CSS)】

ruby {
  ruby-position:before;
  }

【使用例(html)】

<ruby>横浜<rp>(</rp><rt>よこはま</rt><rp>)</rp></ruby>

【設定値】
before → テキストの上部にルビを表示
after → テキストの下部にルビを表示
right → テキストの右側にルビを表示

設定値により、ルビの表示される位置が変わります。

◆ ruby-align
ルビの行揃え位置を指定するプロパティです。

【使用例(CSS)】

ruby {
  ruby-align:center;
  }

【使用例(html)】

<ruby>横浜<rp>(</rp><rt>よこはま</rt><rp>)</rp></ruby>

【設定値】
auto → ブラウザが自動調整(初期値)
start → ルビを左寄せ
left → ルビを左寄せ
center → ルビを中央寄せ
end → ルビを右寄せ
right → ルビを右寄せ
distribute-letter → ルビを均等に配置
distribute-space → ルビの前後にスペースが入って、均等に配置
line-edge → 基本的には中央寄せだが、行末や行頭を行端に合わせてルビの配置が調整

◆ ruby-overhang
ルビがルビをふられる本体テキストよりも長い場合に、どの範囲までルビをはみ出して表示するかを指定するプロパティです。

【使用例(CSS)】

ruby {
  ruby-overhang:start;
  }

【使用例(html)】

<ruby>IT<rp>(</rp><rt>インフォメーションテクノロジー</rt><rp>)</rp></ruby>

【設定値】
auto → ruby要素外の他テキスト上にまではみ出してルビを表示(初期値)
start → ルビを左寄せ
end → ルビを右寄せ
none → ruby要素外の他テキストにはかからないでルビを表示

【対応ブラウザ】
IE6-9

カテゴリー:HP制作, css

コメントを残す

コメント内容