blob: 91a07ef691e13445bc8f518cc55f5ed8249e8428 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
---
title: '<rb>: ルビベース要素'
slug: Web/HTML/Element/rb
tags:
- Element
- HTML
- HTML text-level semantics
- Reference
- Ruby
- Text
- Web
translation_of: Web/HTML/Element/rb
---
<div>{{HTMLRef}}{{Non-standard_Header}}</div>
<p><span class="seoSummary"><strong>HTML ルビベース (<code><rb></code>) 要素</strong>は、 {{HTMLElement("ruby") }} 表記のベースとなるテキストの部分を区切るために使用されます。つまり、修飾される文字列です。</span>一つの <code><rb></code> 要素がベーステキストの不可分な区間を隔てるように囲みます。</p>
<div class="hidden">\{{EmbedInteractiveExample("pages/tabbed/rb.html", "tabbed-standard")}}</div>
<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th>
<td>なし</td>
</tr>
<tr>
<th scope="row">許可されている内容</th>
<td>{{htmlelement("ruby")}} 要素の子と同様。</td>
</tr>
<tr>
<th scope="row">タグの省略</th>
<td>終了タグを省略できるのは、要素に {{HTMLElement("rt")}}, {{HTMLElement("rtc")}}, {{HTMLElement("rp")}} 要素、または他の <code><rb></code> 要素が続く場合、または親要素に残りのコンテンツがない場合です。</td>
</tr>
<tr>
<th scope="row">許可されている親要素</th>
<td>{{HTMLElement("ruby")}} 要素。</td>
</tr>
<tr>
<th scope="row">許可されている ARIA ロール</th>
<td>すべて</td>
</tr>
<tr>
<th scope="row">DOM インターフェイス</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Attributes" name="Attributes">属性</h2>
<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes" rel="internal">グローバル属性</a>のみがあります。</p>
<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2>
<ul>
<li>ルビ表記は、日本語の振り仮名や台湾語の注音符号のように、東アジアの文字の発音を示すためのものです。 <code><rb></code> 要素はルビベース文字の区間を区切るために使用されます。</li>
<li><code><rb></code> 要素は空要素ではありませんが、ソースコード上ではそれぞれの要素の開始タグだけを含めるのが一般的で、その方がマークアップが複雑ではなく読みやすくなります。ブラウザーは表示する際に完全な要素に補完します。</li>
<li>修飾をしたいそれぞれのベース区間/<code><rb></code> 要素ごとに一つずつ {{htmlelement("rt")}} 要素を置く必要があります。</li>
</ul>
<h2 id="Examples" name="Examples">例</h2>
<p>この例では、元の文字に対して "Kanji" が等価であるという注釈を提供します。</p>
<pre class="brush: html notranslate"><ruby>
<rb>漢<rb>字
<rp>(</rp><rt>kan<rt>ji<rp>)</rp>
</ruby></pre>
<p>ルビのベーステキストを二つの部分に区切るために二つの <code><rb></code> 要素を含めています。一方で、注釈も二つの {{htmlelement("rt")}} 要素で区切っています。</p>
<p>なお、この例を完全に分割して注釈された二つのベーステキストの部分で書くこともできます。この場合は <code><rb></code> 要素を含める必要はありません。</p>
<pre class="brush: html notranslate"><ruby>
漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby></pre>
<div class="hidden">
<div id="with-ruby">
<pre class="brush: html notranslate"><ruby> <rb>漢<rb>字 <rp>(</rp><rt>kan<rt>ji<rp>)</rp> </ruby>
</pre>
<pre class="brush: css notranslate">body {
font-size: 22px;
}</pre>
</div>
</div>
<p>出力は以下のようになります。</p>
<p>{{EmbedLiveSample("with-ruby", "100%", 60)}}</p>
<p>上記の HTML はルビに対応して<em>いない</em>ブラウザーでは次のように表示されます。</p>
<div id="without-ruby">
<div class="hidden">
<pre class="brush: html notranslate">漢字 (kan ji)</pre>
<pre class="brush: css notranslate">body {
font-size: 22px;
}
</pre>
</div>
</div>
<p>{{EmbedLiveSample("without-ruby", "100%", 60)}}</p>
<div class="note">
<p><strong>注</strong>: それ以外の例は、 {{HTMLElement("ruby")}} 要素についての記事を参照してください。</p>
</div>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-rb-element', '<rb>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<p>{{Compat("html.elements.rb")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{HTMLElement("ruby")}}</li>
<li>{{HTMLElement("rt")}}</li>
<li>{{HTMLElement("rp")}}</li>
<li>
<p>{{HTMLElement("rtc")}}</p>
</li>
</ul>
|
