【初心者向け】supの使い方とは?基本的な使い方と応用

美味しいものを食べ過ぎて、ちょっとふくふくし始めたれおです。

今回は、supタグの説明をします。

一般的な文章にはあまり使うことはないので初心者の方は

supって何だろう?

supとはどういうときに使うのかな?

と戸惑うこともあるでしょう。

supタグはいわゆる上付き文字のことです。化学式や計算式などに使われることが多いので、一般的な文章にはあまり使いません。

しかし、使えるタグですので覚えておいて損はないでしょう。

今回は、supの

・基本的な使い方
・上級者に見える応用

について説明します。

今から実際にsupタグを詳しく見ていきましょう。

supとは

supの読み方

supは「Superscript」の略語で、「スーパースクリプト」と読みます。

日本語の意味は形容詞で「(文字が)上付きの」、名詞として「上付き文字」になります。

supの説明

「Superscript」の意味の通り、supタグは上付き文字を表示するHTMLタグです。

上付き文字とは数式や計算式に出てくる「x2」の”2”のように、特定の意味がある場合、基準の文字の横にずらして上揃えで並べられた小さな文字のことです。

supで利用できる属性

supタグでは以下の属性を使うことができます。

属性 説明
グローバル属性  すべての HTML 要素で使える属性です。HTML5から登場した概念で、それまでのバージョンでも利用されていた、accesskey、class、dir、id、lang、style、tabindex、titleと、HTML5以降に追加されたいくつかの属性から構成されます。
以下は代表的な属性です。
id  他の要素と区別するための固有の識別名(ID)を指定します。class属性同様、要素にCSSでスタイルを適用するためによく使われます。同じid属性はページ内で1回しか使えません。
lang  要素の内容が含まれるテキストがどのような言語で書かれているか表します。
title  要素のタイトルを定義します。パソコンのブラウザでは、要素部分にマウスを当てると定義したタイトルが表示されます。
注意
すべての要素で使用できますが、要素によっては効果がないこともあります。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox  完全対応
nternet Explorer  完全対応
Opera  完全対応
Safari  完全対応
スマートフォン用ブラウザ 対応状況
Android webview 完全対応
Android版Chrome  完全対応
Android版Firefox  完全対応
Android 版 Opera  完全対応
iOS版Safari  完全対応
Samsung Internet  完全対応

supの基本的な使い方

supの使い方

<sup>~</sup> で囲まれたテキストを上付きの文字で表示します。

必ず開始タグと終了タグが必要で、省略はできません。

実際にサンプルを書いてみましょう。

このように表示されます。

サンプルページ

1平方メートルは、1m2です。

supタグで囲まれた”2”が上付き文字になりましたね。

・数学のマークアップにはMathMLを使用することが推奨されていますが、 複雑な数式をマークアップする必要が無ければ、<sup>タグを使うことができます。

・文字の大きさの設定で、上付き文字の大きさも変わります。

文字の大きさを小さく設定すると、上付き文字の大きさが小さくなり過ぎてしまう可能性があるので注意してください。

・文章を装飾したいと言った理由で上付き文字は使わないでください。

また、varタグ内に書くことができます。varタグは変数の意味で、この中にsupタグを書くと変数になった上付き文字になります。

サンプルで書き方を見てみます。

このように表示されます。

有名な等式の一つが、

a2 + b2 = c2

変数は一般的なブラウザでは斜めに表されます。

supと類似する要素との違い

supタグとは反対の意味を持つ、下付き文字を表す「sub」タグがあります。

<sub>~</sub>で囲まれたテキストが下付き文字になります。

化学式や数式で使われることが多いです。

このように表示されます。

水は、H2Oと表される。

supの応用的な使い方

supタグの上級者に見える応用を説明します。

注釈をつける

文章や単語が難しかったり、その文章内での特別な意味など注釈をつける場合に使えます。

注釈をつける注1

また、注釈の上付き文字にリンクをつける場合はこうなります。

注釈をつける注1 

 商標マークなどの記号や発音記号

TMやRなどの商標記号や、発音記号に使うことができます。

このように表示されます。

商品名TM

superior lettering

superior lettering は、細かく言うと上付き文字と同じではありません。しかし、 HTML で superior lettering を表すことは sup タグの一般的な利用方法の1つです。

最も多い superior lettering の使用例として、一部の言語では、略語を表す際に上付き文字が使用されることがあります。

最もsuperior lettering を使うことが多いのは、フランス語の略語の表現です。

フランス語のmademoiselle(マドモワゼル :未婚の女性)は”Mlle” 、 Madame(マダム :既婚女性)”Mme” と省略して書かれることがありますが、 その略語の一部を上付き文字にするのが慣例となっています。

 このように表示されます。

Mlle Saint-Hilaire and Mme Darmesteter

※2012年にマドモアゼル表記はフランスの公文書で廃止になっています。

序数

英語の “fourth” やスペイン語の “cuarto” などの序数は、省略されることがあります。

出力はこのように表示されます。

English: 4th

French: 4ème

まとめ

いかがでしたでしょうか?

今回はsupタグの基本的な使い方と、上級者に見える応用を説明しました。

今は使うことがなくても、これから使うことが出てくる可能性もありますので、ぜひ覚えてくださいね。