HTML5

2021.05.18

【HTML5】上付き文字の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」の内容を確認したところ記載がありました…。)

まとめ

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

関連記事はこちら

関連記事

  • 2022.01.11

    【HTML5】ふりがなを振ろう!ruby要素などルビ関連要素の使い方

    HTML5

  • 2022.01.05

    オリジナルの404エラーページを作る方法

    HTML5

  • 2021.12.24

    【HTML5】目立たせる要素(em・strong・mark・b)の違いや使い方

    HTML5

おすすめ記事

  • 2021.09.10

    JavaScriptの基礎をスピーディーに学べる!初心者におすすめの教本を紹介

    JavaScript

  • 2021.09.24

    JavaScriptの勉強におすすめの本7選【初心者〜上級者別に厳選】

    JavaScript

  • 2021.05.24

    初心者でもすぐに使えるjQueryが満載なおすすめ本【書評】

    JavaScript

WPサービス

×