HTMLで漢字にルビをふる方法/rubyタグとrt・rpタグの使い方

student IT

HTMLで(かん)()にルビをふる場合は、rubyタグとrtタグを使用すると便利です。

Advertisements

rubyタグの使い方

rubyで囲った要素はルビをふる対象となります。

rubyタグ:ルビ範囲の指定
<ruby>漢字</ruby>
(ルビをふられる準備がととのう)

もしルビをふる対象(ルビベース)であることをよりはっきりと示したいのであれば、ルビベースはrbで囲います。
ただしrb要素は省略しても問題ありません(rubyタグの中に記入されたルビ以外の文章はrb要素とみなされるため)。

rbタグ:ルビベースの指定
<ruby><rb></rb><rb></rb></ruby>

ルビにあたる文章をrt要素でルビベースの後ろに追加します(rbは省略しています)。

rtタグ:ルビを指定
<ruby><rt>かん</rt><rt></rt></ruby>

これで対応ブラウザであれば(そしてCSSが設定されていれば)ルビが表示されます。ただし対応してないブラウザだと「漢かん字じ」と表示されますので、rtに対応していない時に表示されるタグ、rpを追記します。

rpタグ:rtタグが非対応の場合に表示する内容を指定
<ruby><rp>(</rp><rt>かん</rt><rp>)</rp><rp>(</rp><rt></rt><rp>)</rp></ruby>

どういうことかというと、rtに対応している場合、rpタグがないものとして扱われるので

<ruby><rp>(</rp><rt>かん</rt><rp>)</rp><rp>(</rp><rt></rt><rp>)</rp></ruby>

(かん)()と表示されます。
いっぽうrtに対応していない場合はrpタグが表示されるので

<ruby><rp>(</rp><rt>かん</rt><rp>)</rp><rp>(</rp><rt></rt><rp>)</rp></ruby>

となるので、漢(かん)字(じ)と表示されます。どちらに転んでもおかしなことにならないわけです。

ですのでrpタグを使う場合は、できる限りrtタグは設定しておくほうが無難です。
上のような一文字ずつルビをふる方法をモノルビといい、複数の文字にまとめて設定することをグループルビといいます。横文字に対してルビをふる場合などはグループルビが一般的ですので、必要に応じて使い分けてみてください。

グループルビ
<ruby>KANJI<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>
→ KANJI(かんじ) 
HTMLの便利な使い方・タグ逆引きリファレンス
ウェブページ作成言語として常に熱い需要を持つHTML関連のまとめページです。 勉強しながらちょっとずつ増やしていく所存です。

コメント