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

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

が、ルビ用の CSSに関しては、まだドラフトで、表示できるブラウザは限られています。

ルビに関する要素やCSSは、まだ仕様がハッキリしていないモヤモヤ状態なところですが、とりあえず 一応今わかっているところをまとめておきます。(2016年7月記)

本日のINDEX
  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 はまだどのブラウザも未対応みたい)

<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>
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)

<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>
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-positionruby-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)

<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>
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 について
これで フレックスボックスという、ウィンドウ幅に合わせて自動でサイズを変動させてくれるボックスを作ることができます。
フレックスボックスに関しては内容が多いので、これまた話を何回かに分けて進めます。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
04 | 2017/05 | 06
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.