サイト制作

supとsubで上付き・下付き文字を表す｜数式と化学式の意味を保つ

慈愛妃きづな

2026-11-10

この記事には広告・アフィリエイトリンクが含まれます。

supは上付き、subは下付き文字を表します。二乗や化学式など表記上の意味がある位置に使い、ロゴを飾るための位置調整とは分けて考えます。

数字の位置が、読む意味を変えます

xの二乗を表すなら、HTMLでは「x<sup>2</sup>」のように数字をsupで囲めます。水の化学式なら「H<sub>2</sub>O」として、2を下付きにします。

数字をただ小さく表示するだけでは、どちらの位置に置くべきか伝わりません。表記のルールとして上へ置くのか、下へ置くのかを示すのが、この二つの要素です。

見た目の都合だけで会社名の一部を持ち上げたい、といった場合はCSSで位置を調整します。supとsubは、表記上の意味がある上付き・下付き文字のために使うことが基本です。

同じように小さく浮いた文字でも、二乗の2と、飾りとしてずらした文字では役目が違います。タグを選ぶときは、その位置に置かないと意味が変わるかを考えると整理しやすくなります。

短い式ならsupとsubで示せても、分数や根号が重なるような式では、MathMLなど数式を扱う仕組みも検討します。見える文字を一つずつ動かすだけで、複雑な式を組み立てようとすると管理が難しくなります。

私は、式がきれいに見えることに加え、小さい画面で数字を読み違えないかも確認したいです。本文中で意味を言葉でも添えると、上付き・下付きの位置だけに理解を頼らずに済みます。