【HTMLタグ】ルビを表示する方法


文字の読み方を示すために、文字上に「フリガナ(読み仮名)」を付けるのが、『ルビ』。

ルビを使わない場合、カッコ書きでフリガナを書いていたと思います。

たとえば、「瑞牆山(みずがきやま)」のように。

ルビを使えば、「瑞牆山みずがきやま」のように、余計な文字数が減り、スッキリします。

記事の読者の教養レベルは、違います。読みにくい文字には、ルビでフリガナをつけて、ユーザビリティを向上してください。

以下で、ルビを表示する方法を説明します。

ルビの設定方法

ルビを表示させるHTMLタグは、<ruby><rt>

【書き方】

全体を<ruby></ruby>で囲み、さらにルビにする文字を<rt></rt>で囲みます。

コードで書くと、以下のようになります。

<ruby>読みにくい文字<rt>ルビにする文字</rt></ruby>

これらのタグは、インライン要素なので、文中に用いても、改行されることはないので、以下のように連続して使えます。

『山梨県の奥秩父山塊おくちちぶさんかいにある瑞牆山みずがきやま』。

CSSで表示を整えることもできます。

標準設定では、以下のようになっています。

rt {
    line-height: normal;
    -webkit-text-emphasis: none;
}

ruby, rt {
    text-indent: 0px;
}

「rt」のcssにfont-size:15px;と記述すれば、『山梨県の奥秩父山塊おくちちぶさんかいにある瑞牆山みずがきやま』となり、ルビの文字が大きくなります。

また、color:#ff0000;と記述すれば、『山梨県の奥秩父山塊おくちちぶさんかいにある瑞牆山みずがきやま』となり、ルビが赤くなります。

インライン要素なので、cssで設定できないものもあります。たとえばwidthやheight、marginの上下など。
スポンサーリンク

ルビが効かないブラウザー対策

ルビは、HTML5で採用された要素なので、未対応のブラウザーの場合、ルビが効かないことがあります。

その場合、『山梨県の奥秩父山塊おくちちぶさんかいにある瑞牆山みずがきやま』のように、ルビ部分が通常のテキストとして表示され、非常に読みにくい文章になってしまいます。

この問題を回避するために使われるタグが<rp>

書き方としては、<rt></rt>の両サイドに「」「」を”はさむ”形で配置し、以下のようになります。

<ruby>読みにくい文字<rp>(</rp><rt>ルビにしたい文字</rt><rp>)</rp></ruby>

ちなみに、ruby対応のブラウザーでは、rp要素は無視されるので、ルビ部分は、正しく表示されます。

スポンサーリンク

オススメの記述方法

このルビを使っていて感じるのが、書く量が多いこと。非常に邪魔くさい。

毎回毎回、タグをキーボードで打ち込んでいると、ストレスを感じます。

僕は、メモ帳などに、『<ruby><rp>(</rp><rt></rt><rp>)</rp></ruby>』と書いておき、コピペするかたちで使っています。

スポンサーリンク
ページ先頭へ