HTMLでルビを振る方法
ルビを振るために必要な要素
- ruby要素
-
ルビを振る文章の範囲を囲う親要素です。
- rt要素
-
「Ruby Text」の略で、ルビテキスト（ふりがな）を指定するための要素です。
- rb要素（省略可能）
-
「Ruby Base」の略で、ルビを振る対象を明示するために使用します。HTML5以降は省略されるようになりました。
基本構造
<ruby>タグでルビを振る文章全体を囲い、それに付随するルビテキストを<rt>タグで囲います。
<ruby>花鳥風月<rt>かちょうふうげつ</rt></ruby>ブラウザで確認すると、CSSを特に指定しなくても、より小さい文字でルビが上部に表示されます。もちろんCSSで、テキストサイズなどのスタイルを調節することができます。
1文字ごとにルビを振る
単語1文字ごとにルビを振りたい場合は、以下のようにルビを振りたいテキストのすぐ後に<rt>タグを記述します。
<ruby>花<rt>か</rt>鳥<rt>ちょう</rt>風<rt>ふう</rt>月<rt>げつ</rt></ruby>それぞれの漢字の上にルビが振られました。
上記の方法だと、「鳥（ちょう）」のようにふりがなの文字数が多い漢字の場合、文字の左右に間隔が空いてしまいます。一つ一つ正確なふりがなを表示したい場合を除いて、基本構造で紹介した例のようにまとめてルビを付ける方法を使った方が綺麗に見えます。
未対応ブラウザ対策
ruby要素は、2022年現在ほぼ全ての主要ブラウザで使用できますが、ごく一部の未対応のブラウザがあります。未対応のブラウザで表示しようとすると。ルビは以下のように上部ではなく横に表示されてしまいます。
その場合には、rp要素を使用します。rp要素は、未対応ブラウザ向けの表示を指定するための要素で、以下のように使用します。
<ruby>花鳥風月<rp>（</rp><rt>かちょうふうげつ</rt><rp>）</rp></ruby>括弧（）の中と外を<rp>タグで囲うことで、未対応ブラウザの場合のみ（）が表示されるようになります。どんなブラウザでも確実に表示させたい場合は、rp要素を使用しましょう。
おわりに
いかがでしたか？HTML内でruby要素を使うことで、簡単にルビを振ることができます。今回紹介した漢字のふりがなだけでなく、英語に対する日本語訳等にも活用できます。ruby要素を活用して、より読みやすく親切なWebページを作ってみましょう。
