HTMLで漢字などにルビ(ふりがな・カタカナ)を振る方法

ルビについて調べたきっかけ

HTMLの勉強をしているときは、「ルビ」については知りませんでした。

ところが、今回、たまたま、テンプレートの一部修正をしようとしたら、見慣れないHTMLタグを見かけました。

そこで、検索して調べたところ、なんと、よくお世話になっていた「とほほ」さんの「とほほのWWW入門」で、<ruby> – ルビ のことを知りました。

そこで、備忘録を兼ねて記録しておきます。

目次

この要素を使用すると、対象のテキストにルビ(ふりがな)を付けることができます。

<ruby></ruby> <rb></rb> <rp></rp> <rt></rt>

説明

ruby、rb、rbc、rp、rt、rtc は、日本語などの言語で「ルビ」をふるための要素です。

2001年5月31日にW3Cから勧告(http://www.w3.org/TR/ruby/)されました。

rbc を除く要素は HTML5 でも採用されました。

HTML Living Standard では、rt, rp, ruby のみを採用しています。

具体例

HTML

<ruby>
紫陽花
<rt>あじさい</rt>
</ruby>

ルビに対応したブラウザでは、次のように表示されます。
表示

紫陽花あじさい

ただし、ルビに未対応のブラウザでは、次のように表示されます。

表示

紫陽花 あじさい

その他いろいろ応用形がありますが、まずは、「HTMLでルビを表示することができる」ということは覚えておくと、いろいろなところで、使えると思います!

目次