HTMLでルビ（ふりがな）をふるタグ

2016年1月20日

この記事は 2 分くらいで読めると思います

読めない漢字にふりがなを付けたい

あんまり普段使う事もないのですが、丁度使う機会があったのでrubyタグについて書いておきます。

夜露死苦に「よろしく」というルビをつける場合は以下のように書きます。

<ruby>
夜露死苦
<rp>（</rp>
<rt>よろしく</rt>
<rp>）</rp>
</ruby>

夜露死苦（よろしく）

<ruby></ruby>で囲んだ部分がルビをふる対象テキストです。

（対象テキストを<rb></rb>で囲む書き方もありますがrbタグはHTML5からは省略可能です。）

上記の例では<rp>で括弧を囲んでいますが、

<rp>で囲んでいる部分はrubyタグを対応していないブラウザの場合に表示されます。

rubyタグ非対応ブラウザの例：夜露死苦（よろしく）

<rt></rt>で囲んだ部分が肝心のルビ（ふりがな）部分のテキストです。

漢字のどの部分を読んでいるのかまで詳細にルビを振る事も出来ます。

<ruby>
知恵<rp>（</rp><rt>ちぇ</rt><rp>）</rp>
輝<rp>（</rp><rt>きら</rt><rp>）</rp>
</ruby>

知恵（ちぇ）輝（きら）

rubyタグに対するCSSも存在します。※覚えなくていいかもです。

ルビの位置を、左寄せ、中央揃え、右寄せ、両端揃え、均等、行端揃えで指定。

ルビが対象テキストよりも長い場合に、前後のテキストの上にはみ出すかどうかを指定。

ルビの位置を、対象テキストの上部か後方で指定。

と、CSSプロパティはあるのですが…だいたい効かないっスね＼(^o^)／

そこでjavascriptを用意してルビの表示を思い通りに…ってそこまでこだわる必要性を全く感じないので今日はこの辺で…

だって夜露死苦（よろしく）で全然かまわないじゃないですか…