【HTML Living Standard】sup要素の使い方
sup要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
supオブジェクトは、HTMLドキュメント内で上付き文字を表すオブジェクトです。この要素は、主に文章の脚注参照番号や、数式における指数などを表現する際に利用されます。例えば、「E=mc²」のように数字や記号を通常のテキストよりわずかに上に配置して表示する場合に用います。
sup要素は単なる視覚的な装飾ではなく、そのコンテンツが周囲のテキストに対する上付き文字として意味を持つことを示します。これにより、スクリーンリーダーなどの補助技術を利用するユーザーにも、その情報が上付き文字として正しく伝わります。
ウェブ標準では、sup要素は純粋に上付き文字としての意味が必要な場合に限定して使用することが推奨されています。単に文字を上に配置したいという見た目の調整はCSSで行い、sup要素はコンテンツの持つ本来の意味に合わせて利用することが重要です。sup要素はインライン要素であり、他のテキストコンテンツの中に含めて使用します。この要素には特定の固有属性はありませんが、HTMLのグローバル属性を適用することができます。
構文(syntax)
1<sup>コンテンツ</sup>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
sup要素とスペースを使いこなす
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>sup要素とスペースの例</title> 7</head> 8<body> 9 <!-- sup要素はテキストを上付き文字として表示します --> 10 <p> 11 水の化学式は H<sub>2</sub>O です。ここで H は水素、O は酸素を示します。 12 しかし、べき乗の場合は 2<sup>10</sup> のように使います。 13 </p> 14 15 <!-- HTMLでは、連続する半角スペースは通常1つのスペースとして表示されます --> 16 <p> 17 これは 10 m<sup>2</sup> の面積です。(複数のスペースが1つに畳み込まれます) 18 </p> 19 20 <!-- ノンブレークスペース ( ) を使用すると、強制的にスペースを挿入し、改行を防ぐことができます --> 21 <p> 22 これは 10 m<sup>2</sup> の面積です。(スペースが保証されます) 23 </p> 24 25 <!-- 数値と単位の間にスペースを挟む際に、 を使うことで、 26 スペースを維持しつつ、数値と単位をひとまとまりとして扱いたい場合に便利です。 --> 27 <p> 28 地球の重力加速度は約 9.8 m/s<sup>2</sup> です。 29 </p> 30</body> 31</html>
HTMLのsup要素は、テキストを上付き文字として表示するために使用されます。例えば、数学のべき乗（2<sup>10</sup>）や、単位の指数（m<sup>2</sup>）などを表現する際に役立ちます。この要素は特定の引数を取らず、また特別な値を返すこともありません。単に囲んだテキストの見た目を、標準のテキストよりもやや小さく上に配置します。
HTMLの通常のテキスト表示では、連続して複数の半角スペースを記述しても、通常はブラウザによって1つのスペースとして表示されます。これは「スペースの畳み込み」と呼ばれる挙動です。しかし、数値と単位の間など、特定の場所で確実にスペースを確保し、かつその部分でテキストが改行されるのを防ぎたい場合があります。そのようなときに便利なのが「ノンブレークスペース（ ）」です。 は、記述した数だけスペースを表示し、さらにその位置でテキストが改行されるのを防ぐ役割があります。例えば、「9.8 m/s<sup>2</sup>」のように記述することで、数値と単位が常にまとまって表示され、読みやすさを保つことができます。これにより、表示の意図を正確にブラウザに伝えることが可能です。
<sup>要素は、化学式における添え字やべき乗など、テキストを上付き文字として表示する場合に適切に利用してください。HTMLでは、連続する半角スペースは通常1つのスペースとして表示されます。意図した通りに複数のスペースを表示したい場合はこの挙動に注意が必要です。スペースを確実に挿入したい場合や、単語や数値と単位の間で強制的に改行させたくない場合は、 （ノンブレークスペース）を使用します。特に、数値と単位の間に を用いることで、スペースを維持しつつ、それらを一まとまりとして扱うことができ、レイアウトの崩れを防ぎ、可読性を向上させられます。
sup要素で上付き文字とスペースを扱う
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>sup要素とスペースの例</title> 7</head> 8<body> 9 <!-- sup要素は上付き文字（スーパー スクリプト）を表示します。 --> 10 11 <!-- sup要素の前後へのスペースの配置例 --> 12 <p>これはテキスト<sup>注1</sup>です。</p> 13 14 <!-- sup要素の内部にスペースを配置する例 --> 15 <p>書籍の版を意味する例: <sup>2nd Edition</sup></p> 16 17 <!-- 複数の半角スペースを明示的に入れたい場合は、HTMLエンティティの を使用します。 --> 18 <p>単位の例: 10<sup>m 2</sup></p> 19</body> 20</html>
HTMLのsup要素は、テキストを上付き文字（スーパー スクリプト）として表示するために使用します。例えば、脚注の参照番号や数学的な指数、特定の単位表記など、基準となるテキストよりも少し上に小さく表示したい場合に利用されます。この要素は単独で使用するものであり、特定の引数を受け取ったり、処理結果を返したりすることはありません。
サンプルコードでは、sup要素のいくつかの使用例を紹介しています。最初の例では、「これはテキスト<sup>注1</sup>です。」のように、文章中の注釈番号を上付きで表現し、関連情報への参照を視覚的にわかりやすくしています。
次に、「書籍の版を意味する例: <sup>2nd Edition</sup>」のように、複数の単語や記号をまとめて上付き文字として表示することも可能です。
また、上付き文字の内部で複数の半角スペースを明示的に表示したい場合は、「10<sup>m 2</sup>」の例のように、HTMLエンティティである （ノンブレーキングスペース）を使用してください。通常の半角スペースはHTMLのレンダリング時に複数連続しても1つにまとめられてしまうため、 を用いることで望む数のスペースを正確に表示できます。sup要素は、コンテンツの意味を損なわずに視覚的な表現を豊かにするために役立つ要素です。
sup要素は、上付き文字（スーパー スクリプト）を表示するためのHTML要素です。その前後や内部にスペースを入れる場合、通常の半角スペースをそのまま入力できます。しかし、HTMLの仕様では、複数の半角スペースを連続して記述しても、ブラウザは通常1つのスペースとして解釈し表示します。
もし複数の半角スペースを明示的に、かつ確実に表示したい場合は、 （ノーブレークスペース）というHTMLエンティティを必要な回数分使用してください。これにより、意図した通りの正確なスペース表現が可能となり、レイアウトの崩れを防ぎます。sup要素は、数学的な指数や脚注の参照など、意味を持つ上付き文字に利用することが推奨されます。