[HTML]ルビ（ふりがな）を振る方法 | WEBデザインのTIPSまとめサイト「ウェブネタチョ」

[HTML]ルビ（ふりがな）を振る方法

HTML

2015.01.21

HTMLで漢字の上に小さくひらがなでルビを振る方法のご紹介です。

ルビをふるにはrubyタグを使う

ルビをふる対象（ルビベース）の漢字を<ruby></ruby>タグで囲み、ふりがな（ルビテキスト）については<rt></rt>タグを使います。

まず最初に、漢字1文字ずつにルビをふる場合の記述方法と表示例です。

<ruby>
	摩<rt>ま</rt>訶<rt>か</rt>般<rt>はん</rt>若<rt>にゃ</rt>波<rt>は</rt>羅<rt>ら</rt>蜜<rt>み</rt>多<rt>た</rt>心<rt>しん</rt>経<rt>ぎょう</rt>
</ruby>

<ruby>

摩<rt>ま</rt>訶<rt>か</rt>般<rt>はん</rt>若<rt>にゃ</rt>波<rt>は</rt>羅<rt>ら</rt>蜜<rt>み</rt>多<rt>た</rt>心<rt>しん</rt>経<rt>ぎょう</rt>

</ruby>

摩ま訶か般はん若にゃ波は羅ら蜜み多た心しん経ぎょう

次に、漢字ひとかたまりに対してルビをふる方法は以下の通りです。

<ruby>
	摩訶般若波羅蜜多心経
	<rt>まかはんにゃはらみたしんぎょう</rt>
</ruby>

<ruby>

摩訶般若波羅蜜多心経

<rt>まかはんにゃはらみたしんぎょう</rt>

</ruby>

摩訶般若波羅蜜多心経まかはんにゃはらみたしんぎょう

②と概ね同じですが、単語ごとにルビを振ることもできます。

<ruby>
	摩訶般若
	<rt>まかはんにゃ</rt>
	波羅蜜多心経
	<rt>はらみたしんぎょう</rt>
</ruby>

<ruby>

摩訶般若

<rt>まかはんにゃ</rt>

波羅蜜多心経

<rt>はらみたしんぎょう</rt>

</ruby>

摩訶般若まかはんにゃ羅蜜多心経はらみたしんぎょう

<ruby>に対応していないブラウザでは、<rp></rp>タグで指定した記号（以下の例であればカッコ）でルビテキストを表示します。

<ruby>
	摩訶般若波羅蜜多心経
	<rp>(</rp>
	<rt>まかはんにゃはらみたしんぎょう</rt>
	<rp>)</rp>
</ruby>

<ruby>

摩訶般若波羅蜜多心経

<rt>まかはんにゃはらみたしんぎょう</rt>

</ruby>

摩訶般若波羅蜜多心経(まかはんにゃはらみたしんぎょう)