<sup>: 上付き文字要素

HTML の 上付き文字要素 (<sup>) は、表記上の理由で下付き文字として表示するべき行内文字列を指定します。上付き文字は普通、小さめのテキストを使用して高いベースラインで表示されます。

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

属性

この要素にはグローバル属性のみがあります。

使用上のメモ

<sup> 要素は、単純に表現や表示の結果を得るためではなく、表記規則上の理由、つまり、表記上の習慣や規則でテキストの位置を変更する必要がある場合にのみ使用してください。

例えば、高いベースラインを使用しているビジネスや製品のワードマークをスタイル付けするには、 <sup> ではなく CSS を使用してください (例えば vertical-align)。例えば、 vertical-align: super とするか、ベースラインを50%上げるのであれば、 vertical-align: 50% とするかしてください。

<sup> の適切な使用例には次のようなものがあります (但し、制約するものではありません)。

• べき乗の表示、例えば "x³"。これには、特に複雑な場合には、 MathML の使用を検討する価値があるかもしれません。以下の例のべき乗を参照してください
• 一部の言語で特定の略語を表示する際の superior lettering。例えば、フランス語では、 "mademoiselle" は "M^lle" のように略すことができます。例は Superior lettering を参照してください。
• 序数の表現、たとえば "fourth." を "4^th" と表現すること。例は Ordinal numbers を参照してください。

例

べき乗

以下のようにべき乗は、上付き文字のもっとも一般的な使い方です。

<p>物理学の中でもっとも有名な等式の一つが、
<var>E</var>=<var>m</var><var>c</var><sup>2</sup>.<p>

結果の出力は次のようになります。

Superior lettering

Superior lettering は、厳密には上付き文字と同じではありません。しかし、 HTML で superior lettering を表現することは <sup> の一般的な利用方法です。最も多い superior lettering の使用例はフランス語の略語の表現です。

<p>Robert a présenté son rapport à M<sup>lle</sup> Bernard.</p>

結果の出力は次の通りです。

序数

英語の "fourth" やスペイン語の "quinto" などの序数は、数字と上付き文字で表示される言語に依存したテキストを使用して略されることがあります。

<p>The ordinal number "fifth" can be abbreviated in various
languages as follows:</p>
<ul>
  <li>English: 5<sup>th</sup></li>
  <li>French: 5<sup>ème</sup></li>
</ul>

出力は以下の通りです。

仕様書

ブラウザーの対応

関連情報

• 下付き文字を表現する HTML の <sub> 要素。sup 要素と同時に使用することはできません。化学式で上付き文字と下付き文字の両方が必要な場合には、MathML を用いる必要があります。
• MathML 要素: <msub>, <msup>, <msubsup>
• CSS の vertical-align プロパティ