◀ 18.

HTML sup要素の使い方（脚注 / 数式 / 商標 / 序数）と sub / CSS vertical-align との関係

▶
編集
この記事の要点
  • <sup> は上付き文字、対になる <sub> は下付き文字を表す HTML 要素
  • 典型用途: 脚注番号 [1] / 累乗 E=mc2 / 商標 TM / 序数 1st / 化学式 H₂O（こちらは sub）
  • 見た目だけが目的なら CSS vertical-align: super で十分。意味があるとき sup 要素を使う
  • sup の中の文字はフォントサイズが約 0.75 倍に縮む → 累乗が読みにくい時は MathML / KaTeX を検討
  • 脚注パターンは <sup><a href="#fn1">[1]</a></sup> のようにクリック可能にする

sup の基本

<!-- 累乗（指数） -->
<p>E = mc<sup>2</sup></p>
<p>2<sup>10</sup> = 1024</p>

<!-- 商標 -->
<p>Coca-Cola<sup>®</sup></p>
<p>iPhone<sup>™</sup></p>

<!-- 序数 -->
<p>The 1<sup>st</sup> place winner</p>
<p>21<sup>st</sup> century</p>

<!-- 脚注 -->
<p>これは重要な事実である<sup><a href="#fn1">[1]</a></sup>。</p>

sub との対

<!-- 化学式 -->
<p>H<sub>2</sub>O は水、CO<sub>2</sub> は二酸化炭素。</p>

<!-- 数学の添え字 -->
<p>x<sub>1</sub>, x<sub>2</sub>, ..., x<sub>n</sub></p>

<!-- 上下を組み合わせ -->
<p>a<sub>i</sub><sup>2</sup>  ← i 番目の要素の二乗</p>

典型用途の早見表

用途例マークアップ
累乗2¹⁰2<sup>10</sup>
添え字x₁x<sub>1</sub>
分数の分子½独自実装または ½（Unicode 文字）
商標®X®X<sup>®</sup>
登録商標™X™X<sup>™</sup>
序数1st, 2nd, 3rd1<sup>st</sup>
脚注本文[1]<sup><a href="#fn1">[1]</a></sup>
同位体¹⁴C<sup>14</sup>C

脚注パターンの実装

<article>
  <p>
    JavaScript は世界で最も人気のあるプログラミング言語である
    <sup><a href="#fn1" id="ref1">[1]</a></sup>。
  </p>
  <p>
    一方、HTML5 は 2014 年に W3C で勧告された
    <sup><a href="#fn2" id="ref2">[2]</a></sup>。
  </p>

  <footer>
    <h2>脚注</h2>
    <ol>
      <li id="fn1">
        Stack Overflow Developer Survey 2024
        <a href="#ref1" aria-label="戻る">↩</a>
      </li>
      <li id="fn2">
        W3C HTML5 Recommendation (2014-10-28)
        <a href="#ref2" aria-label="戻る">↩</a>
      </li>
    </ol>
  </footer>
</article>

CSS vertical-align との違い

/* 見た目だけ上付きにする（意味は変えない） */
.super-look {
  vertical-align: super;
  font-size: .75em;
}

/* sup 要素のデフォルトスタイルは実質これ */
sup {
  vertical-align: super;
  font-size: smaller;
  line-height: 0;   /* ★ 行間を増やさないテクニック */
}

意味の有無で使い分けます:

  • 累乗 / 化学式 / 脚注 / 商標 / 同位体 → 意味があるので <sup> / <sub>
  • デザイン的に文字をちょっと上に動かしたいだけ → CSS の vertical-align

sup が行間を広げる問題

そのまま <sup> を使うと、その行だけ行の高さが広がることがあります。line-height: 0 で抑えるテクニック:

sup, sub {
  font-size: .75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }

MathML / KaTeX との比較

累乗や添え字が複雑になる本格的な数式は <sup> / <sub> ではすぐ限界が来ます。専用技術を検討:

技術特徴
<sup> / <sub>シンプル。1〜2 段の累乗 / 添え字向け。CSS で見た目調整
MathMLW3C 標準の数式マークアップ。Chrome 109+ / Safari / Firefox 対応
KaTeX / MathJaxLaTeX 風記法を JS でレンダリング。複雑な数式に対応
画像最終手段。検索や選択不可

MathML 例

<math>
  <msup>
    <mi>x</mi>
    <mn>2</mn>
  </msup>
  <mo>+</mo>
  <msup>
    <mi>y</mi>
    <mn>2</mn>
  </msup>
  <mo>=</mo>
  <msup>
    <mi>r</mi>
    <mn>2</mn>
  </msup>
</math>

アクセシビリティ

  • スクリーンリーダーは sup の中身をそのまま読み上げる（「2 の 10 乗」とは読まれない）
  • 「210」は「2 10」と読まれる → 必要なら aria-label="2 の 10 乗"
  • 脚注リンクは aria-describedby で説明を関連付けるとより親切
<p>
  これは事実だ<sup><a href="#fn1" aria-describedby="fn1-text">[1]</a></sup>
</p>
<p id="fn1-text" hidden>脚注 1: 出典 ABC 2024</p>

Unicode の上付き文字との比較

Unicode には上付き専用文字（U+00B2 ² など）も存在しますが、使える数字や文字が限られるため、自由な内容には <sup> を使うほうが汎用的です。

方式例使い分け
Unicode 文字m² / m³ / x⁰ ⁺ ⁻ ⁼ ⁽ ⁾単純な数値・記号で十分なとき
<sup>xn / 1st任意の文字・数式が必要なとき

FAQ

Q: SEO に <sup> は影響する？
A: ほぼ無し。中身のテキストは普通に検索対象になります。

Q: <sup> をネストできる？
A: 可能だが、二段累乗（2 の 2 の 10 乗）は読みづらくなるので MathML / KaTeX 推奨。

Q: 脚注を勝手にスクロールアニメで戻りたい
A: CSS だけで html { scroll-behavior: smooth; } を入れれば、リンクジャンプがアニメ化されます。

編集
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 07:12:00 guest 212

人気ページ

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