過去バージョン

この記事の要点

は下付き文字 (subscript) を表すインライン要素 化学式 (H2O)、数式の添字、脚注番号などで使う (上付き) と対をなす。e=mc2 など CSS の vertical-align: sub + font-size: smaller で代替可能だが、意味を持たせるなら要素を使う 複雑な数式は MathML や KaTeX / MathJax 等の専用ライブラリを推奨

_とは

(subscript) は、下付き文字として文字を表示するインライン要素です。化学式、数学の添字、脚注、変数のインデックスなどに使われます。

水の化学式は H2O である。


CO2 は温室効果ガスの代表である。


数列 a1, a2, a3, ... an


詳細は別表1を参照。

^との対

と (superscript: 上付き) は一対の要素です。

要素	用途	例
	下付き文字	H2O, log10(x)
	上付き文字	x2, 109, ™, ®

主な使用例

化学式

H2O


H2SO4


C6H12O6


SO42-


14C

数式・統計

Sn = a1 + a2 + ... + an


log2(x) = ln(x) / ln(2)


N0 = 初期値, Nt = t 時点の値


∂f / ∂xi

変数インデックス（プログラミング解説など）

  配列 arr のインデックス i は 0 から N-1 の範囲を取り、
  arri が i 番目の要素を表す。

デフォルトスタイルと 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 による見た目だけの表現は別物です。化学式・数式のようにセマンティクスが重要なら必ず を使ってください。

カスタマイズ: 行間を保つ

そのまま使うと行の高さが広がってしまうことがあります。次の 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 行以上の数式や、複数の上下付きが入り組む場合は では限界があります。MathML を使うのが本来の解です:

$x^{\mathrm{n}}$


$x_{\mathrm{i}}^2$

KaTeX / MathJax を使う場合

水の分子式は $H_2O$ である。
エネルギーは $E = mc^2$ である。

アクセシビリティ

スクリーンリーダーは を普通の文字として読み上げることがほとんどです。「H 2 O」のように読まれます。意味を保証したい場合は aria-label で補完します:

H2O

よくあるミス

• 上下逆 - と を間違える
• 大量の数式を全て 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: 検索キーワードへの直接効果はありません。意味的に正しいマークアップとして使うべきです。