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

タイトル: sup要素で上付き文字を表示する
SEOタイトル: HTML sup要素の使い方（脚注 / 数式 / 商標 / 序数）と sub / CSS vertical-align との関係

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

sup の基本



E = mc2


210 = 1024




Coca-Cola®


iPhone™




The 1st place winner


21st century




これは重要な事実である[1]。

sub との対



H2O は水、CO2 は二酸化炭素。




x1, x2, ..., xn




ai2  ← i 番目の要素の二乗

典型用途の早見表

用途例マークアップ
累乗2¹⁰210
添え字x₁x1
分数の分子½独自実装または ½（Unicode 文字）
商標®X®X®
登録商標™X™X™
序数1st, 2nd, 3rd1st
脚注本文[1][1]
同位体¹⁴C14C

脚注パターンの実装


  

    JavaScript は世界で最も人気のあるプログラミング言語である
    [1]。
  

  

    一方、HTML5 は 2014 年に W3C で勧告された
    [2]。
  


  

    
脚注

    
    
      
  1. 
        Stack Overflow Developer Survey 2024
        ↩
      
    2. 
      
  2. 
        W3C HTML5 Recommendation (2014-10-28)
        ↩
      
    3.

CSS vertical-align との違い

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

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

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

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

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 との比較

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

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

MathML 例


  
    x
    2
  
  +
  
    y
    2
  
  =
  
    r
    2

アクセシビリティ

  • スクリーンリーダーは sup の中身をそのまま読み上げる（「2 の 10 乗」とは読まれない）
  • 「210」は「2 10」と読まれる → 必要なら aria-label="2 の 10 乗"
  • 脚注リンクは aria-describedby で説明を関連付けるとより親切

  これは事実だ[1]

Unicode の上付き文字との比較

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

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

FAQ

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

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

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