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」のような単位もきちんと表現でき知っていると便利なため、ぜひご活用ください!

関連記事はこちら

関連記事

  • 2021.07.29

    【おすすめ書籍】一冊で固められる基礎!超欲張りな参考書

    CSS

    HTML5

    JavaScript

  • 2021.07.10

    HTMLのコメントアウトの書き方と注意点【初心者向け】

    HTML5

  • 2021.06.02

    【IEバグ】flex-direction: column;を指定した時に画像の下に余白ができるバグ解消【CSS1行……

    CSS

    HTML5

おすすめ記事

  • 2021.07.29

    【おすすめ書籍】一冊で固められる基礎!超欲張りな参考書

    CSS

    HTML5

    JavaScript

  • 2021.06.08

    CSSだけでできる!マーカーで線が引かれているようなデザインの作り方

    CSS

    WordPress

  • 2021.08.31

    超簡単!Wordpressにヒートマップを導入する方法

    WordPress

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!