タイトル: sub要素
SEOタイトル: HTML <sub> 要素の使い方｜下付き文字・化学式・<sup> との対
| この記事の要点 |
|
とは
<sub> (subscript) は、下付き文字として文字を表示するインライン要素です。化学式、数学の添字、脚注、変数のインデックスなどに使われます。
<!-- 水分子 -->
<p>水の化学式は H<sub>2</sub>O である。</p>
<!-- 二酸化炭素 -->
<p>CO<sub>2</sub> は温室効果ガスの代表である。</p>
<!-- 数学の添字 -->
<p>数列 a<sub>1</sub>, a<sub>2</sub>, a<sub>3</sub>, ... a<sub>n</sub></p>
<!-- 脚注番号 -->
<p>詳細は別表<sub>1</sub>を参照。</p>との対
<sub> と <sup> (superscript: 上付き) は一対の要素です。
| 要素 | 用途 | 例 |
|---|---|---|
<sub> | 下付き文字 | H2O, log10(x) |
<sup> | 上付き文字 | x2, 109, ™, ® |
主な使用例
化学式
<!-- 水 -->
H<sub>2</sub>O
<!-- 硫酸 -->
H<sub>2</sub>SO<sub>4</sub>
<!-- グルコース -->
C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>
<!-- イオン: 上付きと組合せ -->
SO<sub>4</sub><sup>2-</sup>
<!-- 同位体 (上下混在: 推奨は MathML) -->
<sup>14</sup>C数式・統計
<!-- 数列 -->
S<sub>n</sub> = a<sub>1</sub> + a<sub>2</sub> + ... + a<sub>n</sub>
<!-- 対数 -->
log<sub>2</sub>(x) = ln(x) / ln(2)
<!-- 統計 -->
N<sub>0</sub> = 初期値, N<sub>t</sub> = t 時点の値
<!-- 偏微分 -->
∂f / ∂x<sub>i</sub>変数インデックス（プログラミング解説など）
<p>
配列 arr のインデックス i は 0 から N-1 の範囲を取り、
arr<sub>i</sub> が i 番目の要素を表す。
</p>デフォルトスタイルと CSS 代替
多くのブラウザの初期 CSS は次のように定義されています:
/* ブラウザの user-agent stylesheet */
sub {
vertical-align: sub;
font-size: smaller;
line-height: normal;
}
sup {
vertical-align: super;
font-size: smaller;
line-height: normal;
}CSS だけで似た表示を作る
/* 意味は持たない、見た目だけ下付き */
.subscript-like {
vertical-align: sub;
font-size: 0.75em;
line-height: 0; /* 行間が広がるのを防ぐ */
}ただし意味的なマークアップ (sub) と CSS による見た目だけの表現は別物です。化学式・数式のようにセマンティクスが重要なら必ず <sub> を使ってください。
カスタマイズ: 行間を保つ
そのまま使うと行の高さが広がってしまうことがあります。次の CSS で抑制できます:
sub, sup {
font-size: 0.75em;
line-height: 0; /* 行高を増やさない */
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}MathML での代替（複雑な数式）
3 行以上の数式や、複数の上下付きが入り組む場合は <sub> では限界があります。MathML を使うのが本来の解です:
<!-- x の n 乗 - MathML -->
<math xmlns="http://www.w3.org/1998/Math/MathML">
<msup>
<mi>x</mi>
<mn>n</mn>
</msup>
</math>
<!-- x_i^2 - 上下付き混在 -->
<math xmlns="http://www.w3.org/1998/Math/MathML">
<msubsup>
<mi>x</mi>
<mn>i</mn>
<mn>2</mn>
</msubsup>
</math>KaTeX / MathJax を使う場合
<!-- KaTeX -->
<link rel="stylesheet" href="katex.min.css">
<script defer src="katex.min.js"></script>
<script defer src="auto-render.min.js"
onload="renderMathInElement(document.body);"></script>
<p>水の分子式は $H_2O$ である。</p>
<p>エネルギーは $E = mc^2$ である。</p>アクセシビリティ
スクリーンリーダーは <sub> を普通の文字として読み上げることがほとんどです。「H 2 O」のように読まれます。意味を保証したい場合は aria-label で補完します:
<span aria-label="水">H<sub>2</sub>O</span>よくあるミス
- 上下逆 -
<sup>と<sub>を間違える - 大量の数式を全て sub/sup で組む → MathML / KaTeX に切替
- 装飾目的で使う → CSS で済むなら CSS の方が適切
- SEO 目的でキーワードを sub に → 効果なし、可読性悪化
FAQ
Q: sub と sup は同時に使える？
A: 一つのテキスト要素に対し同時には付けられません（HTML の仕様上どちらか）。同時に表示したい場合は MathML を使うか、CSS で重ねます。
Q: 行間が広がる問題の解決法は？
A: 上述の line-height: 0 + position: relative 方式が最も簡単。
Q: sub/sup は SEO に影響する？
A: 検索キーワードへの直接効果はありません。意味的に正しいマークアップとして使うべきです。