ほんっとにはじめての HTML5 と CSS3

前回は、ルビじゃない要素に display:ruby や display: ruby-text を指定して、ルビテキストとして表示させました。
その流れで今回は ルビ関連のためCSSプロパティをまとめます。
ルビ用のプロパティは、ルビ関連要素でしか使いません。

が、ルビ用の CSSに関しては、まだドラフトで、表示できるブラウザは限られていますが、とりあえず 一応今わかっているところをまとめておきます。（2016年7月記）

1. ルビだけに使えるCSSプロパティ
   1. ruby-alignプロパティ
   2. ruby-positionプロパティ
   3. ruby-mergeプロパティ

display プロパティは記事を数回に分けています。こんなかんじで↓

【17-1】display でボックスの表示形式を自由に変えよう

displayプロパティと値の一覧／display: inline／block／inline-block／none／run-in

【17-2-1】display:list-itemでリスト関連じゃない要素をリストっぽく

display:list-item で、<li>要素じゃない要素を<li>要素のように扱えます

【17-2-2】リスト関連の要素のためのCSSプロパティ

リスト関連の要素だけに使えるCSSプロパティをまとめます

【17-3-1】display:tableでテーブル関連じゃない要素をテーブルっぽく

display:table などで、テーブル関連じゃない要素にテーブルの性質を与えます

【17-3-2】テーブル関連の要素のためのCSSプロパティ

テーブル関連の要素だけに使えるCSSプロパティをまとめます

【17-4-1】display:rubyでルビ関連じゃない要素をルビテキストに

display:ruby で、要素にルビ（ruby）を表示する機能を与えます

【17-4-2】ルビ関連の要素のためのCSSプロパティ　←今ココ

ルビ関連の要素だけに使えるCSSプロパティをまとめます

【18-1】Flexbox を使おう！（display:flexでFlexboxを作る）

display: flex に関しては、Flexbox として仕切り直します。 display: flex で「Flexboxコンテナ」を定義し、その他のプロパティも使ってフレキシブルボックスを作ります

ルビだけに使えるCSSプロパティ

ルビ用のCSSプロパティは全部まだCSS3のドラフト。ブラウザに実装されているモノが少ないです。
とりあえずW3Cのドラフトにあるプロパティと値の一覧。今のところプロパティは3つだけです。

プロパティ	概要	値
ruby-align	ルビとルビベースの横方向の揃え方を決める	start　center　space-between　 space-around
ruby-position	ルビの位置を決める（上とか下とか）	over　under　inter-character　right　left
ruby-merge	ルビをルビベースに対して分けるか決める	separate　collapse　auto

ruby-alignプロパティ

ruby-alignプロパティは、ルビテキスト と ルビベース の揃え方を指定します。
参考資料：CSS Ruby Layout Module Level 1 _ 4.3 the ruby-align property

ruby-align の値
start	頭揃え
center	中央揃え
space-between	ジャスティファイ（デフォルト） 両端を揃えて、短いほうはスペースを均等に空ける
space-around	ジャスティファイで短いほうの両端に半角分のスペースを空ける

値の継承	あり	適用できる要素	display:ruby な要素

サンプルです。

天照大神あまてらすおおみかみ（space-between デフォルト）
天照大神あまてらすおおみかみ（start）
天照大神あまてらすおおみかみ（center）
天照大神あまてらすおおみかみ（space-around）

Firefox で見るとこう↓（space-around はまだどのブラウザも未対応みたい）

上のサンプルの HTMLです。

<p id="smp3_1">
<ruby>天照大神<rt>あまてらすおおみかみ</rt></ruby><span>（space-between デフォルト）</span><br>
<ruby id="algn2">天照大神<rt>あまてらすおおみかみ</rt></ruby><span>（start）</span><br>
<ruby id="algn3">天照大神<rt>あまてらすおおみかみ</rt></ruby><span>（center）</span><br>
<ruby id="algn4">天照大神<rt>あまてらすおおみかみ</rt></ruby><span>（space-around）</span>
</p>

サンプルの CSSです。

p#smp3_1 {border:solid 1px #ccc; padding:0.8em; margin-bottom:0; font-size:120%; line-height:2.5em}
p#smp3_1 span {font-size:80%}
/*1行目の ruby-align は指定していないのでデフォルト値です*/
p#smp3_1 ruby#algn2 {ruby-align:start}
p#smp3_1 ruby#algn3 {ruby-align:center}
p#smp3_1 ruby#algn4 {ruby-align:space-around}

ruby-positionプロパティ

ruby-positionプロパティは、ルビテキストの位置を指定します。
参考資料：CSS Ruby Layout Module Level 1 _ 4.1 the ruby-position property

ruby-position の値（＊画像はW3Cサイトから転用しています）
over	ルビはルビベースの上に（デフォルト）
under	ルビはルビベースの下に
inter-character	ルビはルビベースの間に。台湾での表示のために提供されているらしいです。
right	縦書きの場合、ルビはルビベースの右に（縦書きのデフォルト）
left	縦書きの場合、ルビはルビベースの左に

値の継承	あり	適用できる要素	display:ruby な要素

サンプルです。Firefoxで見ると「under」も効いています。それ以外はまだ使えないね。

吾輩わがはいは猫である。（over デフォルト）
吾輩わがはいは猫である。（under）
吾わが輩はいは猫である。（inter-character）

吾輩わがはいは猫である。（right デフォルト）
吾輩わがはいは猫である。（left）

上のサンプルの HTMLです。

<p id="smp3_2">
<ruby>吾輩<rt>わがはい</rt></ruby>は猫である。<span>（over デフォルト）</span><br>
<ruby id="pstn2">吾輩<rt>わがはい</rt></ruby>は猫である。<span>（under）</span><br>
<ruby id="pstn3">吾<rt>わが</rt>輩<rt>はい</rt></ruby>は猫である。<span>（inter-character）</span>
</p>
<p id="smp3_2_v">  <!--ここから↓縦書き-->
<ruby id="pstn4">吾輩<rt>わがはい</rt></ruby>は猫である。<span>（right デフォルト）</span><br>
<ruby id="pstn5">吾輩<rt>わがはい</rt></ruby>は猫である。<span>（left）</span>
</p>

サンプルの CSSです。

p#smp3_2, p#smp3_2_v {
	border:solid 1px #ccc; padding:0.8em; margin-bottom:0; font-size:120%; line-height:2.5em}
p#smp3_2 span, p#smp3_2_v span {font-size:80%}
p#smp3_2 ruby#pstn2 {ruby-position:under}
p#smp3_2 ruby#pstn3 {ruby-position:inter-character}
p#smp3_2_v { /*縦書きには writing-modeプロパティを使います*/
	-ms-writing-mode:tb-rl; /*IE8+*/
    -webkit-writing-mode:vertical-rl;
    writing-mode:vertical-rl}
p#smp3_2_v ruby#pstn4 {ruby-position:right}
p#smp3_2_v ruby#pstn4 {ruby-position:left}

縦書きには writing-modeプロパティを使います（7〜9行目）
これに関しては、フォントやテキストに関するプロパティで取り上げる予定です。

ruby-mergeプロパティ

ルビ関連プロパティは、ruby-position と ruby-align のほかに、ruby-overhang, ruby-span があったのですが、今の草案ではこの2つが無くなって、かわりに ruby-mergeプロパティがあがっています。

ruby-mergeプロパティは、複数のルビベースとルビテキストがある場合に、ルビテキストをルビベースに対して分けるか分けないかを指定するらしいです。
参考資料：CSS Ruby Layout Module Level 1 _ 4.2 the ruby-merge property

ruby-merge の値
separate	ルビテキストを分ける（デフォルト）
collapse	ルビテキストを分けない
auto	ブラウザにおまかせ

値の継承	あり	適用できる要素	display:ruby な要素

これは、基本的に <rb>要素を使ってルビベースを複数に分けたときに使うものらしいですが、<rb>要素はほとんどのブラウザが採用していないので、今後どうなるか不明。（また変わるかも。消えるか）
<rb>要素については、こちらをご覧ください。
[19] テキストにルビをつけてみよう（ruby, rt, rb, rp, rtc）

一応サンプルです。
Firefoxでも対応してないようです。他のブラウザでは <rb>に対応していないので無意味だし。

ああ無情むじょう（separate デフォルト）
ああ無情むじょう（collapse）
ああ無情むじょう（auto）

上のサンプルの HTMLです。

<p id="smp3_3">
ああ<ruby>無<rb>情<rt>む<rt>じょう</ruby><span>（separate デフォルト）</span><br>
ああ<ruby id="merge2">無<rb>情<rt>む<rt>じょう</ruby><span>（collapse）</span><br>
ああ<ruby id="merge3">無<rb>情<rt>む<rt>じょう</ruby><span>（auto）</span>
</p>

サンプルの CSSです。

p#smp3_3 {
	border:solid 1px #ccc; padding:0.8em; margin-bottom:0; font-size:120%; line-height:2.5em}
p#smp3_3 span {font-size:80%}
p#smp3_3 ruby#merge2 {ruby-merge:collapse}
p#smp3_3 ruby#merge3 {ruby-merge:auto}

次回予告

ルビ専用のプロパティと言っても、まだ安心して使えるものが無いですね。
まずはルビ関連の要素の仕様が統一されることが先。その後CSSも整って行くのでしょうね。

さて次回は displayプロパティに戻って、display: flex について。
これで フレックスボックスという、ウィンドウ幅に合わせて自動でサイズを変動させてくれるボックスを作ることができます。
フレックスボックスに関しては内容が多いので、これまた話を何回かに分けて進めます。

関連記事

• 【19】visibility で表示か非表示かを指定しよう
• 【18-5】Flexboxの古い仕様とベンダープレフィックスまとめ
• （ちょっとメモ）Flexbox をシミュレーションできるサイト2件
• 【18-4】Flexboxの orderプロパティで表示順を自由に変えよう
• 【18-3】Flexbox内の縦（垂直）方向を揃えよう
• 【18-2】Flexbox内のボックスの配置方法を指定しよう
• 【18-1】Flexbox を使おう！（display:flexでFlexboxを作る）
• 【17-4-2】ルビ関連の要素のためのCSSプロパティ
• 【17-4-1】display:rubyでルビ関連じゃない要素をルビテキストに
• 【17-3-2】テーブル関連の要素のためのCSSプロパティ
• 【17-3-1】display:table でテーブルじゃない要素をテーブルっぽく
• 【17-2-2】リスト関連の要素のためのCSSプロパティ
• 【17-2-1】display:list-itemでリスト関連じゃない要素をリストっぽく
• 【17-1】displayプロパティでボックスの表示形式を自由に変えよう
• （ちょっとメモ）スマホで background-attachment: fixedが効かない場合の対処法