スタイルシートリファレンス > ruby-align

スタイルシートリファレンス ruby-align


ruby-align ルビの配置を指定する (IE5)

ルビの配置を指定します。

auto
自動:規定値
left
左寄せ
right
右寄せ
center
中央
distribute-letter
両端揃え
distribute-space
均等配置
line-edge
行末での配置調整

▲ページ先頭へ

使用例 ruby-align

HTMLソース

<html>
<head>
<title>CSS テスト</title>
<style type="text/css">
<!--
.smp1 {
ruby-align: auto;
}
.smp2 {
ruby-align: left;
}
.smp3 {
ruby-align: right;
}
.smp4 {
ruby-align: center;
}
.smp5 {
ruby-align: distribute-letter;
}
.smp6 {
ruby-align: distribute-space;
}
.smp7 {
ruby-align: line-edge;
}
-->
</style>
</head>
<body>
auto<br>
このように、
<ruby class="smp1"><rb>表 示</rb><rt>ひょうじ</rt></ruby>
されます。<br>
left<br>
このように、
<ruby class="smp2"><rb>表 示</rb><rt>ひょうじ</rt></ruby>
されます。<br>
right<br>
このように、
<ruby class="smp3"><rb>表 示</rb><rt>ひょうじ</rt></ruby>
されます。<br>
center<br>
このように、
<ruby class="smp4"><rb>表 示</rb><rt>ひょうじ</rt></ruby>
されます。<br>
distribute-letter<br>
このように、
<ruby class="smp5"><rb>表 示</rb><rt>ひょうじ</rt></ruby>
されます。<br>
distribute-space<br>
このように、
<ruby class="smp6"><rb>表 示</rb><rt>ひょうじ</rt></ruby>
されます。<br>
line-edge<br>
このように、
<ruby class="smp7"><rb>表 示</rb><rt>ひょうじ</rt></ruby>
されます。<br>
</body>
</html>

▲ページ先頭へ

ブラウザ上の表示


auto

このように、表 示(ひょうじ)されます。


left

このように、表 示(ひょうじ)されます。


right

このように、表 示(ひょうじ)されます。


center

このように、表 示(ひょうじ)されます。


distribute-letter

このように、表 示(ひょうじ)されます。


distribute-space

このように、表 示(ひょうじ)されます。


line-edge

このように、表 示(ひょうじ)されます。


▲ページ先頭へ

関連項目【ルビ】

ruby-align
ルビの配置を指定する (IE5)
ruby-overhang
ルビのはみ出し具合を指定する (IE5)
ruby-position
ルビの表示位置を指定する (IE5)

▲ページ先頭へ

スタイルシートリファレンス > ruby-align