HTML

この記事では、漢字などの文字にふりがなを添える<ruby>要素と、読み方を指定する<rt>要素の基本を初心者向けに説明します。

HyperText Markup Language ruby element.

ruby 要素

　ruby要素は、ルビを伴ったテキストを表します。ルビ・テキストには rt要素を使います。基本的に、HTML5の ruby要素は、単純ルビをサポートします。

<p>私は
<ruby>
	戸簾<rt>とみす</rt>
	凰太<rt>おうた</rt>
</ruby>
です。</p>

　ブラウザによってレンダリング結果が違って見える場合もありますが、Google Chromeで表示させると、次のようにレンダリングされます。

グループ・ルビのレンダリング例

　ruby要素は、前述の例のように、いくつかの漢字をまとめて「ふりがな」を割り振るグループ・ルビだけでなく、モノ・ルビにも対応しています。モノ・ルビとは、1つの漢字ごとに、それぞれの「ふりがな」を対応付けたルビを表します。

<p>私は
<ruby>
	戸<rt>と</rt>
	簾<rt>みす</rt>
	凰<rt>おう</rt>
	太<rt>た</rt>
</ruby>
です。</p>

　ruby要素は、ルビ・テキスト（ふりがな）そのものを表しているわけではない点に注意してください。前述の例のいずれも、セマンティクス上、ruby要素が表すものはベース・テキストである「戸簾凰太」であって、ルビ・テキストである「とみすおうた」ではありません。

　ruby要素のレンダリングをサポートしていないブラウザでは、グループ・ルビの例は、次のようにレンダリングされます。

firefoxでのレンダリング例

　これは非常に読みにくいだけでなく、ruby要素に対応していないスクリーン・リーダーや音声ブラウザでは、本文とルビが連続して読み上げられてしまい、とてもわかりづらいと言えます。

　したがって、現状では、まだ ruby要素をこのまま使うのは難しいと言えますが、ルビを括弧で囲むのであれば、多少は分かりやすくなります。ルビの括弧表記については rp要素をご覧ください。

　2013年6月現在の最新版で、Google Chrome、Internet Explorer、Safariが ruby要素のレンダリングをサポートしています。また、Firefoxでは、「HTML Ruby」というアドオンを使うことで、ruby要素のレンダリングが可能となります。

このアドオンは、W3Cの Ruby Annotationをサポートしたものですが、HTML5の ruby要素の仕様は、W3Cの Ruby Annotationの単純ルビの仕様と、マークアップ上は同じであることから、HTML5の ruby要素も問題なくレンダリングされます。

ruby 要素の概要

カテゴリー

フロー・コンテンツ

フレージング・コンテンツ

コンテンツ･モデル

フレージング・コンテンツの後に、rt要素 1つだけ、または、rp要素、rt要素、rp要素の順番で並んだ塊が続く。この一連のグループを 1つ以上入れなければいけません。

利用可能な場所

フレージング・コンテンツが期待される場所

タグの省略

不可。開始と終了タグの両方が必要。

要素固有のコンテンツ属性

なし

標準的なスタイル

				
ruby {
	display: ruby;
}