HTMLでルビ（ふりがな・よみがな）を振る方法

サイトやブログを作成する際、ルビ（振り仮名・読み仮名）を振りたいと思うことはありませんか？

例えば、以下のような難読地名にはルビが必要ですよね。

「先日、兵庫県神戸市に訪れた際に北区淡河（おうご）町と中央区熊内（くもち）町で素敵な撮影スポットを発見しました♪」

他にも小説を書く際に特殊な読み方をさせたい場合などにも有用です。

「俺は本気（マジ）で最終奥義である究極爆撃鎮魂歌（アルティメットレクイエムボンバー）を習得（マスター）したぜ！」

ルビは<ruby>タグを使うだけで簡単にできるので、やってみましょう！

HTMLでの<ruby>タグの使い方

基本のルビを振る方法

基本は以下のようになります。

<ruby>文字<rt>ルビ</rt></ruby>

上記の場合、「文字（ルビ）」と表示されます。

ただし、古いブラウザなどで<ruby>タグが非対応の場合は「文字ルビ」と表示されます。

非対応ブラウザ対策ありのルビを振る方法

<ruby>タグ非対応ブラウザでの表示を「文字（ルビ）」にするには、<rp>タグを用います。

<rp>タグは、ルビが非対応の古いブラウザなどの場合にルビを（）で代用してくれます。

<rp>タグを用いると、以下のようになります。

<ruby>文字<rp>（</rp><rt>ルビ</rt><rp>）</rp></ruby>

これで対応ブラウザでは「文字（ルビ）」、非対応ブラウザでは「文字（ルビ）」という表示になります。

一文字ずつルビを振る方法

熟語ではなく一文字ずつにルビを振りたい場合は、以下のようになります。

<ruby>一<rp>（</rp><rt>ひと</rt><rp>）</rp>文<rp>（</rp><rt>も</rt><rp>）</rp>字<rp>（</rp><rt>じ</rt><rp>）</rp></ruby>

これで対応ブラウザでは「一（ひと）文（も）字（じ）」、非対応ブラウザでは「一（ひと）文（も）字（じ）」という表示になります。

ルビを活用しよう！

HTMLでルビを振るのは意外と簡単です。

サイトやブログによっては使えると便利ですので、是非取り入れてみてくださいね。