--- title: ': 下付き文字要素' 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 ---
{{HTMLRef}}

HTML の 下付き文字要素 (<sub>) は、表記上の理由で下付き文字として表示するべき行内文字列を指定します。下付き文字は普通、小さめのテキストを使用してベースラインよりも低く表示されます。

{{EmbedInteractiveExample("pages/tabbed/sub.html", "tabbed-shorter")}}
コンテンツカテゴリ フローコンテンツ, 記述コンテンツ, 知覚可能コンテンツ
許可されている内容 記述コンテンツ
タグの省略 {{no_tag_omission}}
許可されている親要素 記述コンテンツを受け入れるすべての要素
暗黙の ARIA ロール 対応するロールなし
許可されている ARIA ロール すべて
DOM インターフェイス {{domxref("HTMLElement")}}

属性

この要素にはグローバル属性以外の属性はありません。

使用上のメモ

<sub> 要素は、単純に表現や表示の結果を得るためではなく、表記規則上の理由、つまり、表記上の習慣や規則でテキストの位置を変更する必要がある場合にのみ使用してください。

例えば、変更したベースラインを{{interwiki("wikipedia", "ワードマーク")}}の中で使用している企業名にスタイル付けするために <sub> を使用することは適切ではありません。このような場合には CSS を使用してください (例えば {{cssxref("vertical-align")}} プロパティを、 vertical-align: sub または、もっと詳細にベースラインの位置を制御するために、 vertical-align: -25% など)。

<sub> の適切な利用場面には次のようなものがあります (これに限定されるものでありません)。

例

脚注番号

伝統的な脚注は下付き文字で表示される番号を使って記述されます。これは <sub> のよくある使い方です。

<p>According to the computations by Nakamura, Johnson, and
Mason<sub>1</sub> this will result in the complete annihilation
of both particles.</p>

結果は次のようになります。

{{EmbedLiveSample("Footnote_numbers", 650, 80)}}

変数の下付き文字

数学では、同じ概念に関連する一連の変数 (例えば同じ軸の距離) を、同じ変数名と下付き文字を使用して表現します。例えば以下のようになります。

<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>

出力は次の通りです。

{{EmbedLiveSample("Variable_subscripts", 650, 80)}}

化学式

化学式を書くときは、 H20 のように、分子の記述の中で原子の数を下付き数字で記述します。水の場合、下付きの "2" は、水分子の中に2つの水素原子があることを表します。

他の例です。

<p>ほぼすべての開発者が大好きな分子は
C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>、
「カフェイン」としてよく知られています。</p>

出力は次の通りです。

{{EmbedLiveSample("Chemical_formulas", 650, 120)}}

仕様書

仕様書 状態 備考
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-sub-and-sup-elements', '<sub> and <sup>')}} {{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-sub-and-sup-elements', '<sub> and <sup>;')}} {{Spec2('HTML5 W3C')}}

ブラウザーの互換性

{{Compat("html.elements.sub")}}

関連情報