トップページ  > CSS3  > ruby-align

★CSS3リファレンス

ruby-align …… ルビの揃え位置を指定する
Internet Explorer5Internet Explorer5.5Internet Explorer6Internet Explorer7Internet Explorer8Internet Explorer9

ruby-alignプロパティは、ルビの揃え位置を指定する際に使用します。

指定できる値は、auto、start、left、center、end、right、distribute-letter、distribute-space、line-edgeのいずれかです。

■値

auto
ユーザーエージェントに依存(ユーザーエージェントには、distribute-space、または、centerでの表示が推奨されている)(初期値)
start
本体テキストの始端に、ルビテキストを揃える
left
本体テキストの左端に、ルビテキストを揃える(startと同じ)
center
ルビテキストは本体テキストの幅の中央に配置される。
もし、本体テキストがルビテキストより短い場合には、本体テキストがルビテキストの幅の中央に配置される
end
本体テキストの終端に、ルビテキストを揃える
right
本体テキストの右端に、ルビテキストを揃える(endと同じ)
distribute-letter
ルビテキストが本体テキストよりも短い場合、ルビテキストの文字が本体テキストの幅に対して均等割付される。
ルビテキストが本体テキストよりも長い場合、本体テキストの文字がルビテキストの幅に対して均等割付される。この際、ルビテキストと本体テキストの両端は揃えられる
distribute-space
ルビテキストが本体テキストよりも短い場合、 ルビテキストは本体テキストの幅に対して均等割付される。 この際、ルビテキストの前後には、いくらかのスペースが空けられる。
ルビテキストが本体テキストよりも長い場合、 本体テキストがルビテキストの幅に対して均等割付される。 この際、本体テキストの前後にいくらかのスペースが空けられる
line-edge
ルビテキストが行端に隣接していない場合はautoと同じ。
ルビテキストが行端に隣接している場合もautoとほぼ同じだが、 行端に隣接している側のルビテキストの端が本体テキストの端に揃えられる。 この動作はルビテキストが本体よりも長い場合のみ有効となる。 ルビテキストが短ければautoと同じになる

■適用対象・値の継承・初期値

初期値
auto
適用対象
すべての要素、生成された内容
値の継承
する

■使用例

スタイルシート部分は外部ファイル(sample.css)に記述。

ruby.sample1 {ruby-align:auto;}
ruby.sample2 {ruby-align:start;}
ruby.sample3 {ruby-align:left;}
ruby.sample4 {ruby-align:center;}
ruby.sample5 {ruby-align:end;}
ruby.sample6 {ruby-align:right;}
ruby.sample7 {ruby-align:distribute-letter;}
ruby.sample8 {ruby-align:distribute-space;}
ruby.sample9 {ruby-align:line-edge;}
ruby {background-color:pink;}
rt {background-color:yellow;}

HTMLソース

<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>

<p><ruby class="sample1">W杯<rt>ワールドカップ</rt></ruby>の<ruby class="sample1">スペイン<rt>西班牙</rt></ruby>×<ruby class="sample1">オランダ<rt>和蘭陀</rt></ruby>戦が楽しみだ。(ruby-align:auto;)</p>
<p><ruby class="sample2">W杯<rt>ワールドカップ</rt></ruby>の<ruby class="sample2">スペイン<rt>西班牙</rt></ruby>×<ruby class="sample2">オランダ<rt>和蘭陀</rt></ruby>戦が楽しみだ。(ruby-align:start;)</p>
<p><ruby class="sample3">W杯<rt>ワールドカップ</rt></ruby>の<ruby class="sample3">スペイン<rt>西班牙</rt></ruby>×<ruby class="sample3">オランダ<rt>和蘭陀</rt></ruby>戦が楽しみだ。(ruby-align:left;)</p>
<p><ruby class="sample4">W杯<rt>ワールドカップ</rt></ruby>の<ruby class="sample4">スペイン<rt>西班牙</rt></ruby>×<ruby class="sample4">オランダ<rt>和蘭陀</rt></ruby>戦が楽しみだ。(ruby-align:center;)</p>
<p><ruby class="sample5">W杯<rt>ワールドカップ</rt></ruby>の<ruby class="sample5">スペイン<rt>西班牙</rt></ruby>×<ruby class="sample5">オランダ<rt>和蘭陀</rt></ruby>戦が楽しみだ。(ruby-align:end;)</p>
<p><ruby class="sample6">W杯<rt>ワールドカップ</rt></ruby>の<ruby class="sample6">スペイン<rt>西班牙</rt></ruby>×<ruby class="sample6">オランダ<rt>和蘭陀</rt></ruby>戦が楽しみだ。(ruby-align:right;)</p>
<p><ruby class="sample7">W杯<rt>ワールドカップ</rt></ruby>の<ruby class="sample7">スペイン<rt>西班牙</rt></ruby>×<ruby class="sample7">オランダ<rt>和蘭陀</rt></ruby>戦が楽しみだ。(ruby-align:distribute-letter;)</p>
<p><ruby class="sample8">W杯<rt>ワールドカップ</rt></ruby>の<ruby class="sample8">スペイン<rt>西班牙</rt></ruby>×<ruby class="sample8">オランダ<rt>和蘭陀</rt></ruby>戦が楽しみだ。(ruby-align:distribute-space;)</p>
<p><ruby class="sample9">W杯<rt>ワールドカップ</rt></ruby>の<ruby class="sample9">スペイン<rt>西班牙</rt></ruby>×<ruby class="sample9">オランダ<rt>和蘭陀</rt></ruby>戦が楽しみだ。(ruby-align:line-edge;)</p>

</body>
</html>
↓↓↓

ブラウザ上の表示

W杯ワールドカップスペイン西班牙×オランダ和蘭陀戦が楽しみだ。(ruby-align:auto;)

W杯ワールドカップスペイン西班牙×オランダ和蘭陀戦が楽しみだ。(ruby-align:start;)

W杯ワールドカップスペイン西班牙×オランダ和蘭陀戦が楽しみだ。(ruby-align:left;)

W杯ワールドカップスペイン西班牙×オランダ和蘭陀戦が楽しみだ。(ruby-align:center;)

W杯ワールドカップスペイン西班牙×オランダ和蘭陀戦が楽しみだ。(ruby-align:end;)

W杯ワールドカップスペイン西班牙×オランダ和蘭陀戦が楽しみだ。(ruby-align:right;)

W杯ワールドカップスペイン西班牙×オランダ和蘭陀戦が楽しみだ。(ruby-align:distribute-letter;)

W杯ワールドカップスペイン西班牙×オランダ和蘭陀戦が楽しみだ。(ruby-align:distribute-space;)

W杯ワールドカップスペイン西班牙×オランダ和蘭陀戦が楽しみだ。(ruby-align:line-edge;)

▲ページ先頭へ
トップページ  > CSS3  > ruby-align
PR
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
HTMLクイックリファレンスについて
© HTMQ