美味しいものを食べ過ぎて、ちょっとふくふくし始めたれおです。
今回は、supタグの説明をします。
一般的な文章にはあまり使うことはないので初心者の方は
supって何だろう？
supとはどういうときに使うのかな？
と戸惑うこともあるでしょう。
supタグはいわゆる上付き文字のことです。化学式や計算式などに使われることが多いので、一般的な文章にはあまり使いません。
しかし、使えるタグですので覚えておいて損はないでしょう。
今回は、supの
・基本的な使い方
・上級者に見える応用
について説明します。
今から実際にsupタグを詳しく見ていきましょう。
目次
supとは
supの読み方
supは「Superscript」の略語で、「スーパースクリプト」と読みます。
日本語の意味は形容詞で「(文字が)上付きの」、名詞として「上付き文字」になります。
supの説明
「Superscript」の意味の通り、supタグは上付き文字を表示するHTMLタグです。
上付き文字とは数式や計算式に出てくる「ｘ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 2 3 4 5 6 7 8 9 10 11 |
<html lang="ja"> <head> <title>サンプルページ</title> </head> <body> <div class="main"> １平方メートルは、１m<sup>2</sup>です。 </div> </body> </html> |
このように表示されます。
サンプルページ
supタグで囲まれた”２”が上付き文字になりましたね。
・数学のマークアップにはMathMLを使用することが推奨されていますが、 複雑な数式をマークアップする必要が無ければ、<sup>タグを使うことができます。
・文字の大きさの設定で、上付き文字の大きさも変わります。
文字の大きさを小さく設定すると、上付き文字の大きさが小さくなり過ぎてしまう可能性があるので注意してください。
・文章を装飾したいと言った理由で上付き文字は使わないでください。
また、varタグ内に書くことができます。varタグは変数の意味で、この中にsupタグを書くと変数になった上付き文字になります。
サンプルで書き方を見てみます。
|
1 2 |
有名な等式の一つが、 <p><var>a<sup>2</sup></var> + <var>b<sup>2</sup></var> = <var>c<sup>2</sup></var></p> |
このように表示されます。
有名な等式の一つが、
a2 + b2 = c2
変数は一般的なブラウザでは斜めに表されます。
supと類似する要素との違い
supタグとは反対の意味を持つ、下付き文字を表す「sub」タグがあります。
<sub>～</sub>で囲まれたテキストが下付き文字になります。
化学式や数式で使われることが多いです。
|
1 |
水は、H<sub>2</sub>Oと表される。 |
このように表示されます。
水は、H2Oと表される。
supの応用的な使い方
supタグの上級者に見える応用を説明します。
注釈をつける
文章や単語が難しかったり、その文章内での特別な意味など注釈をつける場合に使えます。
|
1 |
注釈をつける<sup>注1</sup> |
注釈をつける注1
また、注釈の上付き文字にリンクをつける場合はこうなります。
|
1 |
注釈をつける<sup><a href="sup.html#t">注1</a></sup> |
注釈をつける注1
商標マークなどの記号や発音記号
TMやRなどの商標記号や、発音記号に使うことができます。
|
1 |
<p>商品名<sup>TM</sup></p> |
このように表示されます。
商品名TM
superior lettering
superior lettering は、細かく言うと上付き文字と同じではありません。しかし、 HTML で superior lettering を表すことは sup タグの一般的な利用方法の1つです。
最も多い superior lettering の使用例として、一部の言語では、略語を表す際に上付き文字が使用されることがあります。
最もsuperior lettering を使うことが多いのは、フランス語の略語の表現です。
フランス語のmademoiselle（マドモワゼル ：未婚の女性）は”Mlle” 、 Madame（マダム ：既婚女性）”Mme” と省略して書かれることがありますが、 その略語の一部を上付き文字にするのが慣例となっています。
|
1 2 |
<span lang="fr"><abbr>M<sup>lle</sup></abbr> Saint-Hilaire</span> and <span lang="fr"><abbr>M<sup>me</sup></abbr>Darmesteter</span>. |
このように表示されます。
Mlle Saint-Hilaire and Mme Darmesteter
※2012年にマドモアゼル表記はフランスの公文書で廃止になっています。
序数
英語の “fourth” やスペイン語の “cuarto” などの序数は、省略されることがあります。
|
1 2 3 |
English: 4<span class="token tag"><span class="token punctuation"><</span>sup<span class="token punctuation">></span></span>th<span class="token tag"><span class="token punctuation"></</span>sup<span class="token punctuation">></span></span> French: 4<span class="token tag"><span class="token punctuation"><</span>sup<span class="token punctuation">></span></span>ème<span class="token tag"><span class="token punctuation"></</span>sup<span class="token punctuation">></span></span> |
出力はこのように表示されます。
English: 4th
French: 4ème
まとめ
いかがでしたでしょうか？
今回はsupタグの基本的な使い方と、上級者に見える応用を説明しました。
今は使うことがなくても、これから使うことが出てくる可能性もありますので、ぜひ覚えてくださいね。
