files/ja/web/html/element/rp/index.html


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

---
title: '<rp>: ルビのフォールバック用括弧要素'
slug: Web/HTML/Element/rp
tags:
  - Element
  - HTML
  - HTML text-level semantics
  - Reference
  - Ruby
  - Text
  - Web
translation_of: Web/HTML/Element/rp
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary"><strong>HTML のルビ代替表示用括弧 (<code>&lt;rp&gt;</code>) 要素</strong>は、 {{HTMLElement("ruby")}} 要素によるルビの表示に対応していないブラウザー向けの代替表示用括弧を提供するために使用します。</span> <code>&lt;rp&gt;</code> 要素は、注釈の文字列を {{HTMLElement("rt")}} 要素を囲む開き括弧と閉じ括弧をそれぞれ囲む必要があります。</p>

<div>{{EmbedInteractiveExample("pages/tabbed/rp.html", "tabbed-shorter")}}</div>

<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>

<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>テキスト</td>
  </tr>
  <tr>
   <th scope="row">タグの省略</th>
   <td>要素の直後に {{HTMLElement("rt")}} または他の <code>&lt;rp&gt;</code> 要素が続くとき、または親要素内にそれ以上のコンテンツがない場合は、終了タグを省略可。</td>
  </tr>
  <tr>
   <th scope="row">許可されている親要素</th>
   <td>{{HTMLElement("ruby")}} 要素。 <code>&lt;rp&gt;</code> 要素は {{HTMLElement("rt")}} 要素の直前または直後に配置しなければなりません。</td>
  </tr>
  <tr>
   <th scope="row">暗黙の ARIA ロール</th>
   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></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">グローバル属性</a>以外の属性はありません。</p>

<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2>

<ul>
 <li>ルビは日本語のふりがなや台湾語の注音符号など、東アジア言語で発音を示すものです。 <code>&lt;rp&gt;</code> 要素は {{HTMLElement("ruby")}} 要素に対応していない場合に使用されます。 <code>&lt;rp&gt;</code> 要素の内容物で、ルビの存在を示すために何を表示すべきか（通常は括弧）を指定します。</li>
</ul>

<h2 id="Examples" name="Examples">例</h2>

<p>この例はそれぞれの文字に等価な{{interwiki("wikipedia", "ローマ字")}}を表示するためのにルビを使用しています。</p>

<div id="with-ruby">
<pre class="brush: html notranslate">&lt;ruby&gt;
  漢 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;Kan&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
  字 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;ji&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
&lt;/ruby&gt;</pre>

<div class="hidden">
<h3 id="CSS">CSS</h3>

<pre class="brush: css notranslate">body {
  font-size: 22px;
}</pre>
</div>
</div>

<p>このブラウザーでは次のように見えます。</p>

<p>{{EmbedLiveSample("with-ruby", 600, 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", 600, 60)}}</p>

<p>それ以外の例は、 {{HTMLElement("ruby")}} 要素についての記事を参照してください。</p>

<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('HTML WHATWG', 'text-level-semantics.html#the-rp-element', '&lt;rp&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-rp-element', '&lt;rp&gt;')}}</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.rp")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{HTMLElement("ruby")}}</li>
 <li>{{HTMLElement("rt")}}</li>
 <li>{{HTMLElement("rb")}}</li>
 <li>
  <p>{{HTMLElement("rtc")}}</p>
 </li>
</ul>