◀ 19.

HTML <sub> 要素の使い方｜下付き文字・化学式・<sup> との対

▶
編集
この記事の要点
  • は下付き文字 (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
    n
  




  
    x
    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: 検索キーワードへの直接効果はありません。意味的に正しいマークアップとして使うべきです。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. h1～h6要素
  2. p要素
  3. blockquote要素
  4. q要素
  5. cite要素
  6. ins要素
  7. del要素
  8. HTML em 要素（強調）の使い方と strong との違い
  9. br要素
  10. abbr要素
  11. dfn要素
  12. pre要素で整形済みテキストを表示する
  13. code要素
  14. samp要素
  15. kbd要素
  16. var要素
  17. bdo要素
  18. sup要素で上付き文字を表示する
  19. sub要素
  20. mark要素
  21. data要素
  22. time要素
  23. wbr要素
  24. bdi要素
2026-06-11 01:55:25 guest 218

人気ページ

最近更新/作成されたページ