この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:6
ページ更新者:guest
更新日時:2026-06-11 07:12:00

タイトル: sup要素で上付き文字を表示する
SEOタイトル: 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>&reg;</sup></p>
<p>iPhone<sup>&trade;</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>&reg;</sup>
登録商標™X™X<sup>&trade;</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=&quot;2 の 10 乗&quot;
  • 脚注リンクは 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; } を入れれば、リンクジャンプがアニメ化されます。