数式や注釈、単位などに使われる「上付き文字」。
HTMLでは <sup> タグを使って簡単に表現できますが、デザイン調整にひと工夫必要な場面も…！
この記事では、<sup> の基本から、CSSを使った見た目のカスタマイズまで詳しく解説します。
もくじ
<sup>タグとは？
<sup>（スーパースクリプト）は、文字を上付きで表示するHTMLタグです。
代表的な使い道
- 数学の指数表現：
10<sup>2</sup>→ 10² - 単位の注釈：
m<sup>2</sup>→ m² - 注記：
※注意事項<sup>*</sup>
基本的な書き方
<p>この面積は100m<sup>2</sup>です。</p>ブラウザが自動的に「小さく・上に」配置してくれます。
CSSでよく行う調整
<sup> はそのままでも使えますが、フォントサイズや位置の微調整をしたい場面もあります。
よくある調整項目
sup {
font-size: 0.7em;
vertical-align: super;
line-height: 1;
}| プロパティ | 役割 |
|---|---|
font-size |
小さすぎる/大きすぎる時に調整 |
vertical-align: super |
上付き位置に移動（ブラウザ依存の補正） |
line-height |
行間の詰まり対策 |
より自由にしたい場合
sup.custom {
font-size: 0.6em;
position: relative;
top: -0.4em;
}→ vertical-align を使わず、position + top で微調整する方法もアリ！
デザインで注意したいこと
- スマホでは小さすぎて読みにくいこともある → メディアクエリで調整OK
- font-size: 0.5em以下にしすぎない → 視認性の問題に注意
- line-heightが小さいと文字がはみ出すことも
supとsubの違いも知っておこう！
| タグ | 説明 | 例 |
|---|---|---|
<sup> |
上付き文字 | m2 → m² |
<sub> |
下付き文字 | H2O → H₂O |
数式や化学式でセットで使われることも多いですね！
まとめ
| 内容 | 詳細 |
|---|---|
| タグ名 | <sup>（スーパースクリプト） |
| 主な用途 | 数字の上付き・注釈・単位 |
| CSS調整 | font-size, vertical-align, line-height, position: relativeなど |
| 注意点 | 小さすぎると読めない／モバイル対応も意識しよう |
デザインを整えるだけで、同じ情報でもグッと読みやすくなります！
数式や注釈の多いサイトでは、ぜひ<sup>を上手に活用してみてくださいね。