WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「ルビの分割」

ruby-merge 「ルビの分割」

ルビを分割表示するかを指定します。

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

ruby-merge の指定方法

構文

ruby-merge : separate | collapse | auto;

プロパティ/設定値意味
ruby-merge: separate; ルビを分割する。
ruby-merge: collapse; ルビを分割しない。
ruby-merge: auto; ブラウザに依存。
デフォルト:「タグ毎のスタイル初期値」を参照
ページTOP

ruby-merge のサンプル


<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-merge-separate{ruby-merge : separate;}
.css-merge-collapse{ruby-merge : collapse;}
.css-merge-auto{ruby-merge : auto;}
</style>
<!-- html -->
<div class="common">
  <div class="cssTitle">ruby-merge:separate<br>(分割表示)</div>
  <div>
  <h5>下記2つは同じ表示結果となる</h5>
  ルビの<ruby class="css-merge-separate">
  <rb>分</rb><rb>割</rb><rb>表</rb><rb>示</rb><rb>確</rb><rb>認</rb><rt>ぶん</rt><rt>かつ</rt><rt>ひょう</rt><rt>じ</rt><rt>かく</rt><rt>にん</rt></ruby>
  ルビの<ruby><rb>分</rb><rt>ぶん</rt><rb>割</rb><rt>かつ</rt><rb>表</rb><rt>ひょう</rt><rb>示</rb><rt>じ</rt><rb>確</rb><rt>かく</rt><rb>認</rb><rt>にん</rt></ruby>
  </div>
  <div class="cssTitle">ruby-merge:collapse<br>(分割無表示)</div>
  <div>
  <h5>下記2つは同じ表示結果となる</h5>
  ルビの<ruby class="css-merge-collapse">
  <rb>分</rb><rb>割</rb><rb>表</rb><rb>無</rb><rb>示</rb><rb>確</rb><rb>認</rb><rt>ぶん</rt><rt>かつ</rt><rt>ひょう</rt><rt>じ</rt><rt>なし</rt><rt>かく</rt><rt>にん</rt></ruby>
  ルビの<ruby><rb>分割表示無確認</rb><rt>ぶんかつひょうじなしかくにん</rt></ruby>
  </div>
  <div class="cssTitle">ruby-merge:auto<br>(分割表示ブラウザ依存)</div>
  <div>
  ルビの<ruby class="css-merge-auto">
  <rb>分</rb><rb>割</rb><rb>表</rb><rb>示</rb><rb>確</rb><rb>認</rb><rt>ぶん</rt><rt>かつ</rt><rt>ひょう</rt><rt>じ</rt><rt>かく</rt><rt>にん</rt></ruby>
  </div>
</div>
ruby-merge:separate
(分割表示)
下記2つは同じ表示結果となる
ルビのぶんかつひょうかくにん
ルビのぶんかつひょうかくにん
ruby-merge:collapse
(分割無表示)
下記2つは同じ表示結果となる
ルビのぶんかつひょうなしかくにん
ルビの分割表示無確認ぶんかつひょうじなしかくにん
ruby-merge:auto
(分割表示ブラウザ依存)
ルビのぶんかつひょうどうかくにん

※ほとんどのブラウザが未対応のようです。

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


関連するCSSプロパティ

ruby-alignルビの揃え方
ruby-positionルビの表示位置
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン