HTML5

2021.05.18

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

サイトを作成しているときに、注釈※1やCO2というテキストが文中にあった場合、注釈※1やCO2のように上付き文字と下付き文字で表現したいこともあると思います。
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.

まとめ

最近はサステナビリティ関連のページを作る機会も多く、そういったページでは「CO2」が文中に入っている機会があるため、使う機会が増えているタグかと個人的には感じています!
その他にも「m2」のような単位もきちんと表現でき知っていると便利なため、ぜひご活用ください!

関連記事はこちら

この記事をシェアする

関連記事

  • 2022.06.09

    この世界はコードでできている#1

    CSS

    HTML5

    その他

    制作

  • 2022.02.08

    チェックボックスで1つしかチェックさせない方法

    HTML5

    JavaScript

  • 2022.01.25

    HTMLでtableタグのセルを結合する方法

    HTML5

おすすめ記事

  • 2022.05.31

    超簡単!GoogleMapの色をサイトにあわせて変える方法

    CSS

    コーディング

    制作

  • 2021.09.29

    【簡単】プロのようなデザインが作れるツールCanva(キャンバ)のおすすめポイント

    その他

  • 好きなフォントは?現役WEBデザイナーに聞いてみた!

    2022.06.01

    デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

    デザイン

    制作

×