WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「ルビの表示揃え方」

ruby-align 「ルビの揃え方」

ルビの揃え方を指定します。

CSS Ver.適用要素継承
3.0<ruby>
display:rubyの要素
する
広告

ruby-align の指定方法

構文

ruby-align : start | center | space-between | space-around;

プロパティ/設定値意味
ruby-align: start; 先頭に揃える。
ruby-align: center; 中央に揃える。
ruby-align: space-between; 両端を揃える。
文字とルビの短い方に均等にスペースを追加して揃える。
ruby-align: space-around; 両端を揃える。
文字とルビの短い方の両端と均等にスペースを追加して揃える。
デフォルト:「タグ毎のスタイル初期値」を参照
ページTOP

ruby-align のサンプル


<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 5px;
}
div.cssTitle {
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css-align-start{ruby-align : start;}
.css-align-center{ruby-align : center;}
.css-align-space-between{ruby-align : space-between;}
.css-align-space-around{ruby-align : space-around;}
</style>
<!-- html -->
<div class="common">
  <div class="cssTitle">ruby-align:start<br>(先頭に揃える)</div>
  <div>
  ルビの<ruby class="css-align-start">
  <rb>先頭表示確認</rb><rt>せんとうひょうじかくにん</rt></ruby>
  </div>
  <div class="cssTitle">ruby-align:center<br>(中央に揃える)</div>
  <div>
  ルビの<ruby class="css-align-center">
  <rb>中央表示確認</rb><rt>ちゅうおうひょうじかくにん</rt></ruby>
  </div>
  <div class="cssTitle">ruby-align:space-between<br>(両端に揃える)</div>
  <div>
  ルビの<ruby class="css-align-space-between">
  <rb>両端揃表示確認</rb><rt>りょうはしそろえひょうじかくにん</rt></ruby>
  </div>
  <div class="cssTitle">ruby-align:space-around<br>(両端に揃える-両端に空白を追加)</div>
  <div>
  ルビの<ruby class="css-align-space-around">
  <rb>両端揃表示確認</rb><rt>りょうはしそろえひょうじかくにん</rt></ruby>
  </div>
</div>
ruby-align:start
(先頭に揃える)
ルビの先頭表示確認せんとうひょうじかくにん
ruby-align:center
(中央に揃える)
ルビの中央表示確認ちゅうおうひょうじかくにん
ruby-align:space-between
(両端に揃える)
ルビの両端揃表示確認りょうはしそろえひょうじかくにん
ruby-align:space-around
(両端に揃える-両端に空白を追加)
ルビの両端揃表示確認りょうはしそろえひょうじかくにん

※ほとんどのブラウザが未対応のようです。
 現時点(2017/03)で、Firefoxは動作確認できました。

【W3Cのruby仕様書】
http://www.w3.org/TR/css-ruby-1/


広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン