HTML STUDY
>
>

ルビをつける

ruby要素とrt要素を使用してテキストにルビをつける方法を解説していきます。

難しい漢字や、当て字など読みにくい漢字にルビをつけていきます。

<ruby>

ruby要素は、ルビをつける時に使います。ルビをつけたい文字を<ruby>～</ruby>で囲み、<rt>～</rt>でルビを記入します。また、ruby要素に対応していないブラウザのために、テキストにカッコをつけrp要素を使ってルビを表す方法もあります。

要素解説
<ruby>フリガナ
<rt>フリガナのテキスト
<rp>フリガナのカッコ
<p><ruby>薔薇<rt>ばら</rt></ruby></p>
<p><ruby>黄昏<rt>たそがれ</rt></ruby></p>

<p><ruby>杜撰<rp>(</rp><rt>ずさん</rt><rp>)</rp></ruby></p>
<p><ruby>草鞋<rp>(</rp><rt>わらじ</rt><rp>)</rp></ruby></p>

ブラウザ表示例

薔薇ばら

黄昏たそがれ

杜撰(ずさん)

草鞋(わらじ)

HTML文字 関連記事