[19] テキストにルビをつけてみよう(ruby, rt, rb, rp, rtc)

この記事の投稿時(2011年8月)は、W3CのHTML5仕様は草案段階で、 <rb>要素・<rtc>要素は入っていませんでしたが、2014年秋のHTML5勧告でこの2つが採用されています。
そこで <rb>要素・<rtc>要素を加えてこのページは全面変更しました。
ただし、<rb>要素・<rtc>要素 の2つは、WHATWG では未定義で、未対応のブラウザが多いのが現状です。(2015年12月追記)

WHATWG (Web Hypertext Application Technology Working Group) は、WEB関連技術に携わる人たちのコミュニティ。W3Cに不満(WEB制作者のニーズに合わないとか)を持った Apple, Mozilla, Opera によって 2004年に設立されたんだって。

1年経っても決着付かないようなので、とりあえず記事を更新しました。またいずれ書き直すことになると思うけど。
この記事は一応 W3Cの勧告に沿って書き、記事後半ににWHATWGの仕様も紹介しています。

HTMLには、テキストのための要素がたくさん用意されていて、使いこなせばとっても便利。
HTML5から新たに加わった要素も含めて、何回かに渡って紹介していきます。

すっごい前にやった <span> <br> も、テキストのための要素です。
<span>要素は…「 [7] <div>や<span>で特定の範囲を指定しよう」をご覧ください。
<br>要素は…「 [5] テキストを改行(<br>)してみよう」をご覧ください。

今日は「ルビ(よみがな)」を表す <ruby>要素とその関連の要素を使いましょう。
<ruby>要素は XHTML1.1から使えるようになった、比較的新しいHTML要素です。

使用する要素 <ruby> 〜 </ruby>
<rt> 〜 </rt>(終了タグは省略可能)
<rp> 〜 </rp>(終了タグは省略可能)
<rb> 〜 </rb>(終了タグは省略可能)
<rtc> 〜 </rtc>(終了タグは省略可能)

<ruby>要素は親になる要素。ルビをつけたい文字とルビを丸ごとセットにして囲みます。
<rt>要素は「ruby text(ルビテキスト)」ルビを囲みます。
<rp>要素は「ruby parentheses(ルビ括弧)」rubyに未対応のブラウザに( )などの中にルビが表示されるように仕込んで、対応ブラウザでは無視するようにできます。

ここからはW3Cだけの仕様です(WHATWGの仕様には含まれません)
<rb>要素は「ruby base(ルビベース)」ルビをつけるテキストをブロック分けしたいときに。
<rtc>要素は「ruby text container(ルビテキスト コンテナ)」ルビをグループ分けできるので、ルビを2種類付けたいときに使います。

WHATWGの仕様でもルビをつけるテキストを分けたり 2種類のルビを付けることができます。
これは<ruby>要素を複数使う方法で、記事の後半にサンプルを載せておきました。

本日のINDEX
  1. <ruby>で全体を囲み <rt>でルビを囲む
  2. <rp>でルビに未対応のブラウザに括弧などをつける
  3. 子要素の終了タグは省略可能
  4. <rb>でルビをつけたい文字を分割できる
  5. <rtc>でルビをグループ化して、2種類のルビをつける
  6. WHATWGの仕様はこうなっています
    1. 1文字ずつへのルビは<ruby>要素を複数使います
    2. 2種類のルビは<ruby>要素を入れ子にします

<ruby>で全体を囲み <rt>でルビを囲む

ルビの基本の構造はこのようになっています。

<ruby> 漢字 <rt>かんじ</rt> </ruby>

ルビをつけたいテキストとそのルビを<ruby>〜</ruby>で囲みます。
その中の「ルビ」だけを<rt>で囲みます。
「rt」は「ruby text」の略です。

サンプルです。

漢字かんじ

<ruby>漢字<rt>かんじ</rt></ruby>

<rp>でルビに未対応のブラウザに括弧などをつける

今はたいていのブラウザはルビに対応しているけど、未対応の古いブラウザで見ている人には、ルビとして表示されずに「漢字かんじ」という見え方になります。
これを「漢字(かんじ)」と、括弧などでルビをまとめるための要素が<rp>要素です。
ルビ未対応のブラウザでは、ルビ関連の要素は無視されるので、そのまま()もテキストとして表示され、対応ブラウザでは<rp>要素の内容は非表示になるので()は見えない という仕組みです。
「rp」は「ruby parentheses」の略です。(直訳すると、ルビ括弧)

<ruby> 漢字 <rp> (</rp> <rt>かんじ</rt> <rp>)</rp> </ruby>

サンプルです。ルビに未対応のブラウザでは「漢字(かんじ)」と表示されます。

漢字かんじ

<ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>

子要素の終了タグは省略可能

上のサンプルのHTMLソースは <rt>や<rp>が細かく付いて複雑ですね。
それを↓このようにシンプルに書くことができます。

<ruby> 漢字 <rp> ( <rt>かんじ <rp>) </ruby>

親の<ruby>の中の子要素の終了タグを省略しています。

<ruby>の子要素である <rt> <rp> <rb> <rtc> の4兄弟は、終了タグを省略できます
直後に自分や他の兄弟が続く、または自分が親の1番最後の子、という条件があるけど、ルビを付けてる時はたいていこの条件下だからね。省略できるモノは省略してソースをスッキリさせよう。

ここまで↑は、W3C でも WHATWG でも共通の仕様です。
ここから↓の <rb> と <rtc>要素については W3C だけの仕様。WHATWG では定義されていません。

<rb>でルビをつけたい文字を分割できる

いちばん最初の基本構造をもう1度見てみましょう。

<ruby> 漢字 <rt>かんじ</rt> </ruby>

ここで、ルビをつけるテキスト(サンプルでは漢字って文字)<rb>要素で暗黙的に囲まれてルビのベースになっています。こんなかんじで↓

<ruby> <rb>漢字</rb> <rt>かんじ</rt> </ruby>

ブラウザが<rt>のテキスト以外をルビベース(rb)のテキストだと解釈しているわけです。
「rb」は「ruby base」の略です。

ですので、<rb>要素を使って、ルビベースを分割することもできます。
1文字1文字にルビを分けて付けたい場合は、このようにします。

<ruby>漢<rb>字</rb><rt>かん</rt><rt>じ</rt></ruby>

最初のルビベース(漢というテキスト)に注目! これには<rb>要素が付いていませんね。
もともと暗黙的に<rb>要素で囲まれているので、分割したいところから<rb>を付ければOKです。(最初っから付けてもいいけど)

ルビベースを分割するなら <rt>要素も分割します。1文字ずつルビがふられるためにね。

サンプルです。

かん

<ruby>漢<rb>字</rb><rt>かん</rt><rt>じ</rt></ruby>

★注意★
これ、Firefoxは対応していて、このように1文字ずつにルビを振り分けることができます。

Chrome, Opera は<rb>要素には未対応で、ルビは付くけど ルビベースの上に乗っからない表示になります(2015年12月記)

子要素の終了タグを省略すれば、このように↓ソースを簡略化することができます。

<ruby>漢<rb>字<rt>かん<rt>じ</ruby>

<rtc>でルビをグループ化して、2種類のルビをつける

<rt>を付けたテキストはルビ、それ以外のテキストは暗黙的に<rb>が付いていてルビベースになるんでしたね。
ここでさらに暗黙的な仕分けがされていて、<rt>が付いているテキストは暗黙的に<rtc>で囲まれています。ルビテキスト コンテナの中に入っているんですね。
「rtc」は「ruby text container」の略です。

<ruby> <rb>漢字</rb> <rtc> <rt>かんじ</rt> </rtc> </ruby>

この原理を利用して、ルビを2種類付けることもできます。
もともと暗黙的に<rtc>があるので、もう1種類のルビを付けたいところから<rtc>を付ければOK

<ruby>漢字 <rt>かんじ</rt> <rtc><rt>kanji</rt> </rtc> </ruby>

もちろん<rtc>要素も終了タグを省略できるので、このように↓書けます。
<rtc>要素には「lang属性」もつけられます。

<ruby>漢字 <rt>かんじ<rtc lang=en><rt>kanji</ruby>

サンプルです。

(かんkanji)

<ruby>漢<rb>字<rp>(<rt>かん<rt>じ<rtc lang=en><rt>kan<rt>ji<rp>)</ruby>

★注意★
Firefoxでは下記のようにルビが2段になって表示されます。

<rtc>に未対応の Operaは <rp>要素によってルビを()で囲んだ表示に。同じく未対応のChromeは <rtc>要素を無視して普通のテキストとして表示してしまいます。(2015年12月記)

WHATWGの仕様はこうなっています

1文字ずつへのルビは<ruby>要素を複数使います

WHATWGの仕様では <rb>要素はありませんが、<ruby>要素で「ルビをつけるテキストと ルビ」のセットを分けることで、1文字ずつに対してルビを付けることができます。。
これなら、どんなブラウザでも <ruby>要素に対応していれば表示することができます。

かん

<ruby>漢<rt>かん</ruby><ruby>字<rt>じ</ruby>

2種類のルビは<ruby>要素を入れ子にします

WHATWGの仕様では <rtc>要素はありませんが、2種類のルビをつけることができます。
それには <ruby>要素をネスト(入れ子に)します。
サンプルで実験してみます。(Firefoxでは2段になりません。Chrome や Opera なら2段に表示されます)

かんKanji

<ruby><ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby><rt lang=en>Kanji</rt></ruby>

この場合、<rt>要素の終了タグは省略できませんね。ルビベースと混ざっちゃうから。
また、WHATWGの仕様では、<rt>要素に「lang属性」を使うようです。

漢字の1文字ずつに2種類のルビを付けるならこのようになります。 <ruby>要素のネストを繰り返すわけで。ソースはちょっと複雑です。(Firefoxでは2段になりません。Chrome や Opera なら2段に表示されます)

かんKanji

<ruby><ruby>漢<rt>かん</ruby><rt>Kan</ruby><ruby><ruby>字<rt>じ</ruby><rt>ji</ruby>
<ruby>
  <ruby>漢<rt>かん</rt></ruby>
  <rt>Kan</rt>
</ruby>
<ruby>
  <ruby>字<rt>じ</rt></ruby>
  <rt>ji</rt>
</ruby>

次回予告

W3CWHATWG の仕様が異なる ruby関連の要素。
<rb>と<rtc>は対応ブラウザが少ないので、あまり使えませんね。
早くどっちかの仕様に統一して欲しいですよね。(どっちが勝つかなぁw)

さて次回は「小さい文字」つながり(?)で、上付き文字下付き文字をやってみましょう。
上付き文字は「100m2」の「2」のように単位などでよく使う、小さく上につく文字のこと。
下付き文字は「CO2」の「2」のように分子記号などでよく使う、小さく下につく文字のことですよ。

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
03 | 2017/04 | 05
- - - - - - 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 - - - - - -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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