Close
ruby-alignプロパティは、ルビの揃え位置を指定する際に使用します。
指定できる値は、auto、start、left、center、end、right、distribute-letter、distribute-space、line-edgeのいずれかです。
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>
<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;）
どのカジノが自分に最適か分からないですか?
