[ HTML ] 振り仮名(ルビ)をふる（rubyタグ）

Tweet

Pocket

HTMLでは、 ruby タグを使用して振り仮名をふることができます。漢字やアルファベットの後に括弧などで振り仮名を書いておけば、ほとんどのケースで事足りると思いますが、どうしても必要という場合に使用することになるでしょう。

こういう感じで、ほとんどの場合はOKかと。。PPAP（ペンパイナッポーアッポーペン）

振り仮名(ルビ)をふる

次が振り仮名を振る HTML のサンプルになります。

<ruby>百舌鳥<rp>(</rp><rt>もず</rt><rp>)</rp></ruby>

実際の表示結果

百舌鳥(もず)

ruby タグ内の rt タグの内容が振り仮名として振られることになります。なお、ruby タグ対応ブラウザの場合には rp タグ内の内容は表示されることはありません。ruby タグ未対応ブラウザの場合はそのまま表示されます。

古い情報ですが、2012年12月の時点では、ruby タグに対応している主要ブラウザは、IE、chrome、safariであり、Firefox、Operaは 標準で未対応です。現在はどうでしょう？気になる方は、実際にご確認ください。

振り仮名の表示位置を指定する

振り仮名の表示位置は、スタイルに ruby-align を指定して変更することができます。

※ 主要ブラウザでは IE のみ対応している模様です。（古い情報ですが）

サンプルコード

    <ruby style="ruby-align: left;">案山子<rp>(</rp><rt>かかし</rt><rp>)</rp></ruby>
    <ruby style="ruby-align: center;">子守熊<rp>(</rp><rt>こあら</rt><rp>)</rp></ruby>
    <ruby style="ruby-align: right;">心太<rp>(</rp><rt>ところてん</rt><rp>)</rp></ruby>

実際の表示結果

案山子(かかし)
子守熊(こあら)
心太(ところてん)

Tweet

Pocket