HTMLでルビ(ふりがな)をふるタグ

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

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

rubyタグについて

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

夜露死苦よろしく

<ruby>

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

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

<rp>

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

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

rubyタグ非対応ブラウザの例:夜露死苦(よろしく)

<rt>

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

より詳細にルビをふる場合

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

知恵ちぇきら

rubyのCSSについて

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

ruby-align

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

ruby-overhang

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

ruby-position

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です