HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<sup>
上付き文字（Superscript）要素。テキストの基準線よりも上に、小さく表示されるテキストを定義します。
info
概要
<sup> 要素は、テキストの基準線よりも上に表示されるインラインテキストを定義します。これは主に、数式の指数 ($x^2 + y^2$)、序数詞 (1$^{\text{st}}$)、商標記号 ($^{\text{TM}}$)、著作権記号 ($^{\text{©}}$)、脚注の参照番号などに使用されます。
単なる装飾目的でテキストを小さく上に表示したい場合は、CSSを使用すべきです。
play_circle
デモ (静的表示)
HTML (Source)
<!-- 数式表現 -->
E = mc<sup>2</sup>
<!-- 商標 -->
Amazing Product<sup>TM</sup>
<!-- 脚注参照 -->
本文中の引用<sup>[1]</sup>
Preview (Result)
E = mc2
Amazing ProductTM
本文中の引用[1]
Amazing ProductTM
本文中の引用[1]
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| グローバル属性 | 全てのHTML要素で使用できる属性です。（例: id, class, style, data-*, title, langなど） |
| （固有属性なし） | <sup> 要素に固有の属性はありません。 |
code
実用例
1. 数式の上付き指数
<!-- 二次方程式の判別式 -->
b<sup>2</sup> - 4ac
2. 商標 (Trademark) と登録商標 (Registered Trademark)
<!-- Unicode文字を使用しても良いが、意味を明示するためにsupを使う -->
Brand Name<sup>®</sup> <span style="font-size: 0.8em;">(R)</span>
3. 脚注の参照番号
<!-- 脚注へのリンクを兼ねる場合 -->
最新の研究<sup><a href="#ref1">1</a></sup>によると...
...
<p id="ref1">[1] 出典: 〇〇論文...</p>
lightbulb
知っておくべき重要事項
warning
視覚的な装飾目的での使用の回避
テキストを単に小さく、上に表示したいという**視覚的な装飾**のためだけに
テキストを単に小さく、上に表示したいという**視覚的な装飾**のためだけに
<sup> を使用するのは避けるべきです。その場合は CSS の vertical-align: super; や font-size プロパティを使用してください。<sup> は、あくまで「意味的な上付き文字」のために存在します。
accessibility_new
アクセシビリティ
スクリーンリーダーは通常、
スクリーンリーダーは通常、
<sup> 要素内のテキストを通常通り読み上げます。例えば $x^2$ を「エックスの二乗」ではなく「エックスに」と読み上げる可能性があります。数学的な表現の場合は MathML や ARIA の利用、あるいはテキストで意味を補うことが推奨されます。