ふりがなを振る。

HTMLで、難しい漢字や英単語にふりがなを振りたいな、というときはruby要素を使います。ふりがなという、ちょっとした所ですけれど、こだわりたい時はこだわりたいところ。<ruby>についてまとめます:)。まずは基本的な書き方から。

ふりがなのための要素

「振（ふ）り仮名（がな）」とは、難しい漢字や英単語などの読み方を示すために添える文字のこと。そんなふりがなをHTMLで表現するための要素がruby要素です。文字の発音を表記するための注釈を示すために用意された要素なのですね。そして「ルビ」とは、活版印刷用語で、当時ふりがなを表記する際に使われていた活字サイズ（5.5ポイント活字）の呼び名「ruby」が由来だそうで、詳しくは以下のページを参照のこと。

ruby要素の使い方

ひとまず、ruby要素の基本的な書き方は、以下の通り。
「準備万端」に「じゅんびばんたん」とふりがなを振りたい時には、以下のように書きます。

<ruby>準備万端<rp>（</rp><rt>じゅんびばんたん</rt><rp>）</rp></ruby>

「準備万端」の上に「じゅんびばんたん」が小さく表示されました！
けれど、ふりがなの前後に書いた「（」（開き括弧）と「）」（閉じ括弧）が表示されてませんねぇ。
ruby要素の中身は、ふりがなをrt要素で囲って、さらにその前後にrp要素でふりがなを囲っている、という構造になっています。ふりがな関連の要素の役割はそれぞれ以下の通り。

ruby要素
ふりがなを振る文字（以下「ルビベース」と言う）と、そのふりがなであることを表す。
rt要素
ふりがな（以下「ルビテキスト」と言う）であることを表す。
rp要素
ruby要素が適用されない場合にルビテキストを囲うための括弧（以下「いざという時のための括弧」と言う）であることを表す。

rp要素で括った括弧は、ruby要素が適用されないいざという時のために書いてるだけで、ruby要素に対応しているブラウザでは、非表示にするようになってるってわけですね;)

端折（はしょ）れる

rp要素もrt要素も閉じタグを端折ることができます。それから「ruby要素が適用されない場合」といっても限られている（後述）ので、普段はrp要素ごと端折ってしまっても大丈夫。
下ソースコードは、1行めが一番シンプルな書き方で、2行めがいざという時のための括弧もある時の書き方です。ずいぶん端折れましたねー:D

<ruby>準備万端<rt>じゅんびばんたん</ruby>
<ruby>準備万端<rp>（<rt>じゅんびばんたん<rp>）</ruby>

それでも、この記事の冒頭の一文すべてにふりがなを振りたいとなったら、一番シンプルなのでも、以下のように書くことになります。

<ruby>HTML<rt>エイチティーエムエル</ruby>で、<ruby>難<rt>むずか</ruby>しい<ruby>漢字<rt>かんじ</ruby>や<ruby>英単語<rt>えいたんご</ruby>にふりがなを<ruby>振<rt>ふ</ruby>りたいな、というときは<ruby>ruby<rt>ルビ</ruby><ruby>要素<rt>ようそ</ruby>を<ruby>使<rt>つか</ruby>います。

やぁこれは大変⁑O。
…なので、HTMLでふりがなを振ることは滅多になくて、当て字にした箇所とか、敢えてそう読んで欲しい箇所とか、これは読み間違えそうだなと思うものだけに、振るとよいです;)。

一文字ごとにふりがなを振る

前述では、熟語をひとまとめにふりがなを振ってましたけれど、漢字ひとつずつにふりがなを振りたいこともあるでしょう。「準備万端」の漢字一文字ごとにふりがなを振りたいって時には、以下のように書きます。

<ruby>準<rt>じゅん</rt>備<rt>び</rt>万<rt>ばん</rt>端<rt>たん</rt></ruby>

この時、rt要素の閉じタグは端折れません。ルビベースとルビテキストが交互に続くので、それらを隔てるために、ちゃんとrt要素を閉じる必要があるんです。

いざという時のための括弧がある場合は、ルビベースと隣り合う閉じ括弧だけ、ちゃんとrp要素を閉じるようにします。

<ruby>準<rp>（<rt>じゅん<rp>）</rp>備<rp>（<rt>び<rp>）</rp>万<rp>（<rt>ばん<rp>）</rp>端<rp>（<rt>たん<rp>）</rp></ruby>

まとめ

というわけで、ruby要素の正しい書き方は、以下の2タイプに決まり:D！（2021年11月現在）

「ruby要素の中にふりがながひとつだけの場合」には、ルビテキストの手前に<rt>を入れるだけでOK;)。

<ruby>準備万端<rt>じゅんびばんたん</ruby>

「ruby要素の中にふりがなが複数ある場合」には、ルビベースとルビテキストを交互に並べて、ルビテキストをrt要素で括ります。

<ruby>準<rt>じゅん</rt>備<rt>び</rt>万<rt>ばん</rt>端<rt>たん</rt></ruby>

以上、ruby要素の基本的な書き方についてのまとめでした！

引用・参考文献

ふりがなのスタイル