＜ruby要素＞ - ルビ

公開日: 2017/02/09

ruby要素は、ルビを表す要素です。ルビは振り仮名や、発音の説明などの注釈に利用されます。2つのルビを同時に付けることも可能です。rt要素とrp要素を組み合わせて使います。

概要

名前

ruby

カテゴリー

Flow content

Phrasing content

Palpable content

配置できる場所

Phrasing contentが期待される場所。

コンテンツモデル

前半(1)と後半(2)の組み合わせを1グループとした、1つ以上のグループ。

1. ruby要素ではなく、かつ、ruby要素を子孫に持たないPhrasing content。

1. または、ruby要素を子孫に持たないruby要素。

2. 1つ以上のrt要素。

2. または、rp要素の後に1つ以上のrt要素が続き、その後にrp要素。

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLElement

デフォルトのスタイル

ruby {
	text-indent: 0px;
}

仕様書

https://html.spec.whatwg.org/multipage/semantics.html#the-ruby-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

基本的な使い方

ruby要素は、rt要素、rp要素と組み合わせて使います。漢字に振り仮名を付けるとしたら、ruby要素の中には、まず漢字、次にrt要素で囲った振り仮名を入れて下さい。

HTML

<ruby>魚<rt>さかな</rt></ruby>

デモを開く

ルビの表示に対応していないブラウザでは、上記の例だと魚さかなと表示されてしまいます。これでは意味が分かりません。そのためにrp要素があります。この要素は、ルビに対応しているブラウザには表示されず、逆に、ルビに対応していないブラウザには表示されます。つまり、次のようにマークアップすれば、ルビに対応していないブラウザでは魚(さかな)と表示されるわけです。

HTML

<!-- 括弧は、ルビに対応してないブラウザにだけ表示される -->
<ruby>魚<rp>(</rp><rt>さかな</rt><rp>)</rp></ruby>

デモを開く

言語が変わる場合は、グローバル属性のlang属性を付けると、ユーザーエージェントに親切です。

HTML

<!-- 日本語に英語のルビを付ける -->
<p>彼は、<ruby lang="ja">錬金術師<rt lang="en">Alchemist</rt></ruby>である。

デモを開く

コンテンツモデルのルールを守れば、2つのルビを振ることもできます。下記は「東京都」という言葉に、振り仮名と注釈のルビを同時に付けた例です。

HTML

<!-- 振り仮名: とうきょう / 注釈: 我が故郷 -->
<p>ここは、<ruby><ruby>東京都<rt>とうきょうと</rt></ruby><rt>我が故郷</rt></ruby>である。</p>

デモを開く

コンテンツモデル

ruby要素のコンテンツモデルは複雑なので、ここで整理しておきましょう。ruby要素の中身は、前半と後半の組み合わせを1つのグループとした、1つ以上のグループです。

前半: ruby要素ではなく、ruby要素を子孫に持たないPhrasing content。; または、ruby要素を子孫に持たないruby要素。
後半: 1つ以上のrt要素。; または、rp要素の後に1つ以上のrt要素が続き、その後にrp要素。

前半

まず、「ruby要素ではなく、ruby要素を子孫に持たないPhrasing content」を見てみましょう。Phrasing contentはテキストそのものも含みます。

前半A

<!-- ruby要素を子孫に持たないPhrasing content -->
SYNCER

または、「ruby要素を子孫に持たないruby要素」です。

前半B

<!-- ruby要素を子孫に持たないruby要素 -->
<ruby>...</ruby>

<!-- ruby要素を子孫に持ってたらダメ -->
<ruby><ruby>...</ruby></ruby>

後半

まず、「1つ以上のrt要素」です。

後半A

<!-- 1つ以上のrt要素 -->
<rt>シンカー</rt>

<!-- 2つでもいい -->
<rt>シンカー</rt><rt>スィンカー</rt>

または、「rp要素の後に1つ以上のrt要素が続き、その後にrp要素」です。

後半B

<!-- rp要素の後に1つ以上のrt要素が続き、その後にrp要素 -->
<rp>(</rp><rt>シンカー</rt><rp>)</rp>

<!-- rt要素は2つでもいい -->
<rp>(</rp><rt>シンカー</rt><rt>スィンカー</rt><rp>)</rp>

前半と後半の組み合わせ

前半と後半を組み合わせると、1つのグループができます。このグループを1つ以上はruby要素に含めないといけない、というのがruby要素のコンテンツモデルというわけです。

1つのグループ

<!-- 前半A + 後半A -->
SYNCER<rt>シンカー</rt>

<!-- 前半A + 後半B -->
SYNCER<rp>(</rp><rt>シンカー</rt><rp>)</rp>

<!-- 前半B + 後半A -->
<ruby>...</ruby><rt>シンカー</rt>

<!-- 前半B + 後半B -->
<ruby>...</ruby><rp>(</rp><rt>シンカー</rt><rp>)</rp>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜ruby要素＞ - ルビ</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/ruby/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>ruby要素は、テキストにルビを振るための要素です。</p>

<p><ruby>SYNCER<rt>シンカー</rt></ruby>をこれからもよろしくお願いいたします。</p>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/607/"> <meta charset="utf-8"> <title>【デモ】＜ruby要素＞ - ルビ</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/ruby/"> </head> <body>

<p>ruby要素は、テキストにルビを振るための要素です。</p> <p><ruby>SYNCER<rt>シンカー</rt></ruby>をこれからもよろしくお願いいたします。</p>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>