さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【HTML5】ruby要素、rt要素、rp要素について

Pocket
LINEで送る

HTML5におけるruby要素、rt要素、rp要素の使用例を紹介します。

ruby要素はルビ(ふりがな)をふりたい場合に使用する要素です。
rt要素はruby要素内でルビにあたるテキストをマークアップします。

【使用例】

<ruby>横浜<rt>よこはま</rt></ruby>

上記の使用例は、複数の文字にまとめてルビをふる例となりますが、1文字ずつルビをふる場合は以下のように指定します。

【使用例】

<ruby>横<rt>よこ</rt>浜<rt>はま</rt></ruby>

ruby要素に対応していないブラウザの為にrp要素を使用しましょう。
括弧を付けてrp要素でくくり、その中にrt要素でくくったルビを入れることにより、ruby要素に対応していないブラウザでは元テキストの後に括弧で囲われたルビが表示されるようになります。

【使用例】

<ruby>横浜<rp>(</rp><rt>よこはま</rt><rp>)</rp></ruby>

【ruby要素非対応ブラウザでの表示例】
横浜(よこはま)

ruby要素対応のブラウザではrp要素でくくられたテキストは表示されません。

カテゴリー:HP制作, HTML5

コメントを残す

コメント内容