↓
振り仮名
（この要素はFireFox バージョン33時点では対応していません）
振り仮名をふる「ruby要素」
難しい漢字や特別な読みをする漢字に振り仮名がふられているところを見たことがありませんか？
また、名前や住所などを記載する際、振り仮名を振ったことがありませんか？
HTML文章も振り仮名をふることができます。
<ruby>と</ruby>で囲んだ範囲のテキストに振り仮名をふることができます。
ちなみに、「ruby」の意味はルビ(振り仮名のこと)。他には宝石のルビーという意味もあります
「ruby要素」内でふりがなをふる「rt要素」
<ruby>と</ruby>で囲んだ範囲のテキストに振り仮名をふることができるといっても、勝手に振り仮名をふってくれるわけではありません。
振り仮名は「ruby要素」内で「rt要素」を使って表します。
<rt>と</rt>で囲んだ範囲を振り仮名として認識します。
「ruby要素」と「rt要素」を組み合わせて使って初めて振り仮名をふることができるということです。
振り仮名と書いてありますが、ひらがなやカタカナでなくてもかまいません。漢字やアルファベットなど他の文字も振り仮名にすることができます。
ちなみに、「rt要素」の「rt」はruby textの略で、振り仮名のテキストという意味です。
「ruby要素」未対応用の要素「rp」要素
冒頭にも注意書きとして書きましたが、この要素はFireFox バージョン33時点では対応していません。
未対応ブラウザから見ると、「<ruby>振り仮名<rt>ふりがな</rt></ruby>」と書くと、「振り仮名ふりがな」と見えます。
つまり、未対応ブラウザはタグ(要素の初めと終わりの<>で囲んだ部分)を無視して表示しているわけです。
そこで未対応ブラウザからみても不自然にならないよう、「rp」要素という要素が用意されています。
「rp」要素は、「ruby要素」に対応しているブラウザでは表示されず、未対応のブラウザではタグを無視するので、<rp>(</rp><rp>)</rp>等、括弧で囲むと振り仮名であることがわかるようになります。
<rp>と</rp>で囲んだ範囲を「ruby要素」に対応しているブラウザでは表示せないようにします。
ちなみに、「rp要素」の「rp」はruby parenthesesの略で、振り仮名の括弧という意味です。
サンプル
今回説明した、「ruby要素」、「rt要素」、「rp」要素を使用したサンプルを用意します。
このサンプルソースはbody要素内(<body>～</body>)に書いてください。
サンプルソースコード
<ruby>平仮名<rp>(</rp><rt>ひらがな</rt><rp>)</rp></ruby><br> <ruby>平<rp>(</rp><rt>ひら</rt><rp>)</rp>仮<rp>(</rp><rt>が</rt><rp>)</rp>名<rp>(</rp><rt>な</rt><rp>)</rp></ruby><br> <ruby>片仮名<rp>(</rp><rt>カタカナ</rt><rp>)</rp></ruby><br> <ruby>アルファベット<rp>(</rp><rt>Alphabet</rt><rp>)</rp></ruby><br>
（<br>とは「改行」を意味する要素です。）
表示結果
平仮名
片仮名
アルファベット
「ruby要素」のまとめと次回記事について
今回説明した「ruby要素」は、「ruby要素」内に振り仮名をふる文字を書いて、そのあとに「rt要素」で振り仮名を指定します。
いままで説明してきた要素の中でも少し使い方が違いますね。
少し難しいように見えますが、実際に使ってみると、何ら難しいことはないことがわかります。
次回は、言葉の定義「dfn要素」と略語の説明「abbr要素」の説明します。
以上、当サイト管理人のAsterismでした。