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
|
---
title: '<sup>: 上付き文字要素'
slug: Web/HTML/Element/sup
tags:
- Element
- HTML
- HTML text-level semantics
- 'HTML:Flow content'
- 'HTML:Palpable Content'
- 'HTML:Phrasing content'
- Reference
- Web
translation_of: Web/HTML/Element/sup
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary">HTML の <strong>上付き文字要素</strong> (<strong><code><sup></code></strong>) は、表記上の理由で上付き文字として表示するべき行内文字列を指定します。</span>上付き文字は普通、小さめのテキストを使用して高いベースラインで表示されます。</p>
<div>{{EmbedInteractiveExample("pages/tabbed/sup.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><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td>
</tr>
<tr>
<th scope="row">許可されている内容</th>
<td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td>
</tr>
<tr>
<th scope="row">タグの省略</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">許可されている親要素</th>
<td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</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>
<p><code><sup></code> 要素は、単純に表現や表示の結果を得るためではなく、表記規則上の理由、つまり、表記上の習慣や規則でテキストの位置を変更する必要がある場合にのみ使用してください。</p>
<p>例えば、高いベースラインを使用しているビジネスや製品の{{interwiki("wikipedia", "ワードマーク")}}をスタイル付けするには、 <code><sup></code> ではなく CSS を使用してください (例えば {{cssxref("vertical-align")}})。例えば、 <code>vertical-align: super</code> とするか、ベースラインを50%上げるのであれば、 <code>vertical-align: 50%</code> とするかしてください。</p>
<p><code><sup></code> の適切な使用例には次のようなものがあります (但し、制約するものではありません)。</p>
<ul>
<li>べき乗の表示、例えば "x<sup>3</sup>"。これには、特に複雑な場合には、 <a href="/ja/docs/Web/MathML">MathML</a> の使用を検討する価値があるかもしれません。以下の{{anch("Examples", "例")}}の{{anch("Exponents", "べき乗")}}を参照してください</li>
<li>一部の言語で特定の略語を表示する際の {{interwiki("wikipedia", "superior letter", "superior lettering")}}。例えば、フランス語では、 "mademoiselle" は "M<sup>lle</sup>" のように略すことができます。例は {{anch("Superior lettering")}} を参照してください。</li>
<li>序数の表現、たとえば "fourth." を "4<sup>th</sup>" と表現すること。例は {{anch("Ordinal numbers")}} を参照してください。</li>
</ul>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Exponents" name="Exponents">べき乗</h3>
<p>以下のようにべき乗は、上付き文字のもっとも一般的な使い方です。</p>
<pre class="brush: html notranslate"><p>物理学の中でもっとも有名な等式の一つが、
<var>E</var>=<var>m</var><var>c</var><sup>2</sup>.<p></pre>
<p>結果の出力は次のようになります。</p>
<p>{{EmbedLiveSample("Exponents", 650, 80)}}</p>
<h3 id="Superior_lettering" name="Superior_lettering">Superior lettering</h3>
<p>Superior lettering は、厳密には上付き文字と同じではありません。しかし、 HTML で superior lettering を表現することは <code><sup></code> の一般的な利用方法です。最も多い superior lettering の使用例はフランス語の略語の表現です。</p>
<pre class="brush: html notranslate"><p>Robert a présenté son rapport à M<sup>lle</sup> Bernard.</p></pre>
<p>結果の出力は次の通りです。</p>
<p>{{EmbedLiveSample("Superior_lettering", 650, 80)}}</p>
<h3 id="Ordinal_numbers" name="Ordinal_numbers">序数</h3>
<p>英語の "fourth" やスペイン語の "quinto" などの序数は、数字と上付き文字で表示される言語に依存したテキストを使用して略されることがあります。</p>
<pre class="brush: html notranslate"><p>The ordinal number "fifth" can be abbreviated in various
languages as follows:</p>
<ul>
<li>English: 5<sup>th</sup></li>
<li>French: 5<sup>ème</sup></li>
</ul></pre>
<p>出力は以下の通りです。</p>
<p>{{EmbedLiveSample("Ordinal_numbers", 650, 160)}}</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-sub-and-sup-elements', '<sub> and <sup>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-sub-and-sup-elements', '<sub> and <sup>;')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("html.elements.sup")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>下付き文字を表現する HTML の {{HTMLElement("sub")}} 要素。sup 要素と同時に使用することはできません。化学式で上付き文字と下付き文字の両方が必要な場合には、<a href="/ja/docs/MathML">MathML</a> を用いる必要があります。</li>
<li>MathML 要素: <a href="/ja/docs/Web/MathML/Element/msub"><code><msub></code></a>, <a href="/ja/docs/Web/MathML/Element/msup"><code><msup></code></a>, <a href="/ja/docs/Web/MathML/Element/msubsup"><code><msubsup></code></a></li>
<li>CSS の {{cssxref("vertical-align")}} プロパティ</li>
</ul>
|
