HTML : ruby (ルビ) の解説 | 独学 Webプログラミング!

この要素は、テキストのフリガナを表します。

文章内の任意のテキストにフリガナ、説明や異なる読み方などの役割を持つテキストを本文より小さく上部または下部に表示します。

ここでは ruby 要素とその子要素らを使用したサンプルを掲載します。

サンプル: rt 要素でルビを振るテキストの範囲を指定する

これは、ruby 要素の子要素として rt 要素 (ルビテキスト) を使った基本的な使用例です。

<body>
	<ruby>
		独学<rt>どくがく</rt>
		Web<rt>ウェブ</rt>
	</ruby>
	プログラミング！
</body>

実行結果:
独学どくがく Webウェブプログラミング！

サンプル: rb 要素でルビの対象となるテキストを関連付ける

rb 要素 (ルビボディ) は、ruby 要素内に複数の rt 要素が存在する場合に、ルビ対象テキストとルビを関連付けることができます。

<body>
	<ruby>
		<rb>独学</rb><rt>どくがく</rt>
		<rb>Web</rb><rt>ウェブ</rt>
	</ruby>
	プログラミング！
</body>

実行結果:
独学どくがく Webウェブプログラミング！

サンプル: rtc 要素でルビテキストを複数指定する

rtc 要素 (ルビテキストコンテナ) は 1 つのルビ対象テキストに対して複数のルビを適用したい場合に使用できます。また、意味上の注釈にもなります。

<body>
	<ruby>
		<rb>独学</rb><rt>どくがく</rt>
		<rb>Web programming</rb><rt>ウェブプログラミング</rt>
		<rtc>( Self study web programming )</rtc>
	</ruby>
</body>

実行結果:
独学どくがく Web programmingウェブプログラミング ( Self study web programming )

サンプル: rp 要素でルビに括弧を付ける

rp 要素を使ルビテキストが括弧付きで表示されるようになりますが、ルビに対応しているブラウザでは括弧は表示されません。

<body>
	<ruby>
		独
		<rp>(</rp><rt>どく</rt><rp>)</rp>
		学
		<rp>(</rp><rt>がく</rt><rp>)</rp>
	</ruby>
</body>

実行結果:
独(どく)学(がく)

Title