HTMLで漢字にルビをふる場合は、rubyタグとrtタグを使用すると便利です。
rubyタグの使い方
rubyで囲った要素はルビをふる対象となります。
<ruby>漢字</ruby>
（ルビをふられる準備がととのう）
もしルビをふる対象（ルビベース）であることをよりはっきりと示したいのであれば、ルビベースはrbで囲います。
ただしrb要素は省略しても問題ありません（rubyタグの中に記入されたルビ以外の文章はrb要素とみなされるため）。
<ruby><rb>漢</rb><rb>字</rb></ruby>
ルビにあたる文章をrt要素でルビベースの後ろに追加します（rbは省略しています）。
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>
これで対応ブラウザであれば（そしてCSSが設定されていれば）ルビが表示されます。ただし対応してないブラウザだと「漢かん字じ」と表示されますので、rtに対応していない時に表示されるタグ、rpを追記します。
<ruby>漢<rp>(</rp><rt>かん</rt><rp>)</rp>字<rp>(</rp><rt>じ</rt><rp>)</rp></ruby>
どういうことかというと、rtに対応している場合、rpタグがないものとして扱われるので
＝漢字と表示されます。
いっぽうrtに対応していない場合はrpタグが表示されるので
となるので、漢（かん）字（じ）と表示されます。どちらに転んでもおかしなことにならないわけです。
ですのでrpタグを使う場合は、できる限りrtタグは設定しておくほうが無難です。
上のような一文字ずつルビをふる方法をモノルビといい、複数の文字にまとめて設定することをグループルビといいます。横文字に対してルビをふる場合などはグループルビが一般的ですので、必要に応じて使い分けてみてください。
<ruby>ＫＡＮＪＩ<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>
→ ＫＡＮＪＩ
HTMLの便利な使い方・タグ逆引きリファレンス
ウェブページ作成言語として常に熱い需要を持つHTML関連のまとめページです。
勉強しながらちょっとずつ増やしていく所存です。
sunagitsune.com
2019.01.27
コメント