supタグの使い方とCSS調整ポイントまとめ

数式や注釈、単位などに使われる「上付き文字」。
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が小さいと文字がはみ出すことも

supsubの違いも知っておこう!

タグ 説明
<sup> 上付き文字 m2 → m²
<sub> 下付き文字 H2O → H₂O

数式や化学式でセットで使われることも多いですね!

まとめ

内容 詳細
タグ名 <sup>(スーパースクリプト)
主な用途 数字の上付き・注釈・単位
CSS調整 font-size, vertical-align, line-height, position: relativeなど
注意点 小さすぎると読めない/モバイル対応も意識しよう

デザインを整えるだけで、同じ情報でもグッと読みやすくなります!
数式や注釈の多いサイトでは、ぜひ<sup>を上手に活用してみてくださいね。

ABOUTこの記事を書いた人

  • mm
  • Editor: うぇぶもようの中の人