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

ルビじゃない要素display: ruby と指定して、その中の要素に display: ruby-text を指定すれば、ルビテキストとして表示することができます。

本日のINDEX
  1. <ruby>関連の要素とそのCSSについて
  2. displayプロパティのルビ関連の値
    1. display:ruby と display:ruby-text
    2. その他のルビ関連の値

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コンテナ」を定義し、その他のプロパティも使ってフレキシブルボックスを作ります

<ruby>関連の要素とそのCSSについて

ルビ関連の要素はもとは IE独自のもので、それが XHTML1.1の仕様に取り入れられたんだそうです。
それをはじめは WebKit系のブラウザ(Chrome, Safari)が対応し、Mozilla(Firefox)はちょっと遅れて最近対応。
その時点で、Chrome, Safari などは W3Cではなく WHATWGの定義で表示するようになってて、
W3Cの定義で表示するのは Firefox だけになっています。

というわけで <ruby>関連の要素の仕様は2パターンあるのが現状。めんどくさいんです。

その <ruby>要素とその関連の要素については、こちらをご覧ください。
WHATWG と W3C の定義を分けて書いています。
[19] テキストにルビをつけてみよう(ruby, rt, rb, rp, rtc)

そしてルビの CSSに関しては、まだドラフトです。
displayプロパティのルビ関連も、表示できるブラウザは限られています。

ルビに関する要素やCSSは、まだ仕様がハッキリしていないモヤモヤ状態なところで display:rubyについての記事をまとめるのも無理があるんですが、とりあえず displayプロパティの話の流れで、一応今わかっているところをまとめておきます。
いずれまた近々、記事を調整することになると思います。(2016年6月記)

displayプロパティのルビ関連の値

dosplayプロパティのルビ関連の値一覧です。
(リンクは「ほんっとにはじめてのHTML5」内の記事へのリンクです。別ウィンドウで開きます)

display のルビ関連の値
ruby 要素は <ruby>要素と同じ性質になります。
ruby-text 要素は <rt>要素と同じ性質になります。
ruby-base 要素は <tb>要素と同じ性質になります。
ruby-base-container 要素は <rbc>要素と同じ性質になります。
<rbc> はXHTMLで定義された要素。ルビベース コンテナを作ります。
HTML5では W3Cでも WHATWGでも定義されていない要素ですが、CSSのドラフトでは残っているんですね。
ruby-text-container 要素は<rtc>要素と同じ性質になります。
値の継承 なし 適用できる要素 全部

display:ruby と display:ruby-text

ここでは <b>要素を display:ruby にして<ruby>要素の役割を与えて、その子要素の <span>要素には display:ruby-text を指定し、ルビテキストを表しています。

漢字かんじ

★Chrome, Operaは未対応。Firefoxでは↓このようにプレビューしました。

<p id="smp1_1">
<b>漢字<span>かんじ</span></b><br>
<b>振<span>ふ</span></b>り<b>仮<span>が</span></b><b>名<span>な</span></b>
</p>
p#smp1_1 {
	border:solid 1px #ccc;
	padding:.8em;
	font-size:130%}
p#smp1_1 b {
	display:ruby;
	font-weight:normal}
p#smp1_1 span {
	display:ruby-text;
	white-space:nowrap;
	font-size:50%;
	font-weight:bold}

ルビ用のテキストは font-size:50% などと小さくする必要があります(11行目)
ほかに white-space:nowrap で勝手に改行されないようにしたり(10行目)しています。

ルビ関連要素なら、ブラウザのルビ用のデフォルトスタイルが適用されますが、そうじゃない要素を displayプロパティでルビにするなら、手動で font-size:50% などを指定する必要があります。

ルビ関連のブラウザデフォルトのスタイルはこんなかんじです↓(まだドラフトだけど)
クリックで該当ページが開きます。

もう1つサンプルです。
ここでは <abbr>要素を使ってみます。<abbr>要素は略語を示すんでしたね。
<abbr>要素に display:rubyを、そのtitle属性を使ったセレクタに擬似要素を付けて display:ruby-textを指定してみます。

The WHATWG started working on HTML5 in 2004.

★Chrome, Operaは未対応。Firefoxでは↓このようにプレビューしました。

<p id="smp1_2">
The
<abbr title=" Web Hypertext Application Technology Working Group">WHATWG</abbr>
started working on HTML5 in 2004.
</p>
p#smp1_2 {
	border:solid 1px #ccc;
	padding:.8em;
	font-size:120%}
p#smp1_2 abbr[title] { /*属性セレクタです。title属性があるabbr要素をセレクタにしています*/
	display:ruby;
	text-decoration:underline;}
p#smp1_2 abbr[title]::after {
	content:attr(title); /*abbr要素のtitle属性の値をコンテンツにします*/
	display:ruby-text;
	white-space:nowrap;
	font-size:50%;
	font-weight:bold}

その他のルビ関連の値

その他の displayプロパティのルビ関係の値は、
display:ruby-base
display:ruby-base-container
display:ruby-text-container

なんですが、
<rb>要素(display:ruby-baseで得る性質)、<rtc>要素(display:ruby-text-containerで得る性質)はW3Cで定義されているけど、ほとんどのブラウザが実装していません。
(WHATWGの仕様を実装しているブラウザが多い。詳しくは [19]ルビをつけてみよう で)
<rbc>要素(display:ruby-base-containerで得る性質)は HTML5では無くなってるんだよね。XHTMLでは定義されているけど。

というわけで、サンプル省略。ルビ関連が落ち着いた頃(っていつになるのかな〜)に先送り!

う〜ん。displayプロパティのルビに関する値は、プレビューできないプラウザが多くて今はあんまり活用できないですね。
素直に <ruby>要素と <rt>要素を使ってたほうがイイみたい。どのブラウザでも見れますから。

次回予告

さて次回は、これまでの流れに沿って、display: ruby などを使うために ルビ用のCSSプロパティを知らなきゃ話になんないのでそれをまとめようと思うのですが、ルビ用のCSSプロパティは、全部まだCSS3のドラフト。ブラウザに実装されているモノが少ないんです。
とりあえず今わかっている範囲でまとめます。

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

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

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

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

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、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.