上付き文字のsupタグと下付き文字のsubタグの使い方

コーディング

サイトを作成しているときに、注釈※1やCO2というテキストが文中にあった場合、注釈^※1やCO₂のように上付き文字と下付き文字で表現したいこともあると思います。
spanタグで指定することもできますが、HTMLのタグを使うだけで簡単に表現することができます！

今回はそんなときに使う上付き文字のsupタグ、下付き文字のsubタグについてご紹介します！

上付き文字のsupタグとは？

上付き文字のsupタグとは「Superscript」の略で、和訳するとそのまま「上付き文字」という意味になります。
タグで囲んだテキストは通常の文字サイズよりも少し小さいサイズで上寄りに表示されます。
主に乗算のような数式を表現する場合に使用します。

下付き文字のsubタグとは？

下付き文字のsubタグとは「Subscript」の略で、和訳すると「添字」という意味になります。
タグで囲んだテキストは通常の文字サイズよりも少し小さいサイズで下寄りに表示されます。
主に化学記号を表現する場合に使用します。

supタグとsubタグの使い方

subタグもsupタグもインライン要素のため、文中のテキストに使用します。
使用する際には少し注意が必要で、「上付き文字」や「添字」という意味になってしまうため、デザインを表現するために使用するのではなくあくまで「上付き文字」や「下付き文字」を書く場合にのみ使用します。

See the Pen abJZgMZ by spiqa design (@spiqa_design) on CodePen.

また、ブラウザの初期状態では未対応のブラウザを除き、どのブラウザでもきちんと上下付きの文字として表示されますが、reset cssを読み込む場合、supタグ、subタグのスタイルのリセットも入っている場合があるため確認する必要があります！
（実際にこの記事を書いているときにスタイルが効いておらず、SPIQA noteで使用しているreset css「Eric Meyer’s “Reset CSS” 2.0」の内容を確認したところ記載がありました…。）

CSSの指定方法

ポシションなどで位置を調整することもできますが、付けたいテキストもspanタグなどで囲んでpositionを指定して…というのは少し手間がかかります。
vertical-alignで調整することができるため、細かい位置にこだわらない場合はvertical-alignでの調整がおすすめです！

See the Pen Untitled by spiqa design (@spiqa_design) on CodePen.