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
150
151
|
---
title: '<sub>: 下付き文字要素'
slug: Web/HTML/Element/sub
tags:
- Baseline
- Element
- Footnotes
- HTML
- HTML text-level semantics
- 'HTML:Flow content'
- 'HTML:Palpable Content'
- 'HTML:Phrasing content'
- Reference
- Subscript
- Web
- sub
translation_of: Web/HTML/Element/sub
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary">HTML の <strong>下付き文字要素</strong> (<strong><code><sub></code></strong>) は、表記上の理由で下付き文字として表示するべき行内文字列を指定します。</span>下付き文字は普通、小さめのテキストを使用してベースラインよりも低く表示されます。</p>
<div>{{EmbedInteractiveExample("pages/tabbed/sub.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><sub></code> 要素は、単純に表現や表示の結果を得るためではなく、表記規則上の理由、つまり、表記上の習慣や規則でテキストの位置を変更する必要がある場合にのみ使用してください。</p>
<p>例えば、変更したベースラインを{{interwiki("wikipedia", "ワードマーク")}}の中で使用している企業名にスタイル付けするために <code><sub></code> を使用することは適切ではありません。このような場合には CSS を使用してください (例えば {{cssxref("vertical-align")}} プロパティを、 <code>vertical-align: sub</code> または、もっと詳細にベースラインの位置を制御するために、 <code>vertical-align: -25%</code> など)。</p>
<p><code><sub></code> の適切な利用場面には次のようなものがあります (これに限定されるものでありません)。</p>
<ul>
<li>脚注番号のマークアップ。例については {{anch("Footnote numbers")}} を参照してください。</li>
<li>数学における下付き文字の変数値のマークアップ（ただし、 <a href="/ja/docs/Web/MathML">MathML</a> の数式を使うことも検討してください）。 {{anch("Variable subscripts")}} を参照してください。</li>
<li>化学式における原子数の記述 (例えば、すべての開発者のお友達、 C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub> 別名「カフェイン」)。 {{anch("Chemical formulas")}} を参照してください。</li>
</ul>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Footnote_numbers" name="Footnote_numbers">脚注番号</h3>
<p>伝統的な脚注は下付き文字で表示される番号を使って記述されます。これは <code><sub></code> のよくある使い方です。</p>
<pre class="brush: html notranslate"><p>According to the computations by Nakamura, Johnson, and
Mason<sub>1</sub> this will result in the complete annihilation
of both particles.</p></pre>
<p>結果は次のようになります。</p>
<p>{{EmbedLiveSample("Footnote_numbers", 650, 80)}}</p>
<h3 id="Variable_subscripts" name="Variable_subscripts">変数の下付き文字</h3>
<p>数学では、同じ概念に関連する一連の変数 (例えば同じ軸の距離) を、同じ変数名と下付き文字を使用して表現します。例えば以下のようになります。</p>
<pre class="brush: html notranslate"><p>The horizontal coordinates' positions along the X-axis are
represented as <var>x<sub>1</sub></var> ... <var>x<sub>n</sub></var>.</p></pre>
<p>出力は次の通りです。</p>
<p>{{EmbedLiveSample("Variable_subscripts", 650, 80)}}</p>
<h3 id="Chemical_formulas" name="Chemical_formulas">化学式</h3>
<p>化学式を書くときは、 H<sub>2</sub>0 のように、分子の記述の中で原子の数を下付き数字で記述します。水の場合、下付きの "2" は、水分子の中に2つの水素原子があることを表します。</p>
<p>他の例です。</p>
<pre class="brush: html notranslate"><p>ほぼすべての開発者が大好きな分子は
C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>、
「カフェイン」としてよく知られています。</p></pre>
<p>出力は次の通りです。</p>
<p>{{EmbedLiveSample("Chemical_formulas", 650, 120)}}</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.sub")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>上付き文字を表現する HTML の {{HTMLElement("sup")}} 要素。sub 要素と同時に使用することはできません。化学式で上付き文字と下付き文字の両方が必要な場合には、<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>
|
