こんにちは、ご覧いただきありがとうございます。
パソコンのそばでゴロゴロしている、もこもこぬくぬく温かい猫と一緒に微睡みたい、れおです。
今回はsubタグの説明をします。
覚えておくと使えるタグです。しかし、頻繁に使うことはあまりないので、初心者の方は
subタグって何だろう？
たまに見かけるけど、いつどういう時何のために使うのかな？
と思うこともあるのではないでしょうか。
簡単に言うと、二酸化炭素の化学式は「CO2」、の”２”のような下付き文字を作るタグのことです。
今回は、subタグの
・基本的な使い方
・参考程度の応用的な使い方
について説明します。
今から実際にsubタグを詳しく見ていきましょう。
目次
subタグとは
subタグの読み方
subは「subscript」の略です。「サブスクリプト」と読みます。
「サブスクリプト」とは日本語での意味は、形容詞として下に書いたとか下付きのと言う意味になります。
subタグは下付き文字
日本語の意味の通り、
subタグは文字を下付きにしたい時に使うタグ
ということになります。
行間から下側に少しずらして表示されている文字のことを下付き文字、と言います。
名詞として、下に記した文字（記号，数字）（例： H２SO４ の ２，４ など）を表します。
化学式や化学反応式、計算式などに使うことが一般的です。
subタグで利用できる属性
subでは以下の属性を使うことができます。
| 属性 | 説明 |
|---|---|
| グローバル属性 | グローバル属性とは、HTML5全ての要素で使用することができる属性です。
HTML5から登場した概念で代表的なものとして、accesskey属性、class属性、dir属性、hidden属性、id属性、lang属性、style属性、tabindex属性、カスタムデータ属性とHTML5以降に追加されたいくつかの属性から構成されます。 |
| accesskey | 要素にアクセスキーを割り当てる属性です。 |
| class | CSSやJavascriptで指定した要素のスタイルを変更したり、何らかの動作を加えたりする属性です。 |
| dir | 要素内の文字の書く方向を指定する属性です。 |
| style | CSSのスタイルを直接書くことができる属性です。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| nternet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
subタグの基本的な使い方
subタグの基本的な使い方
subタグは
|
1 |
<sub>下付にしたい文字や数字など</sub> |
と言うように、下付にしたい文字や数字などを<sub></sub>で囲みます。開始タグと終了タグを忘れずに書きましょう。
では、実際にsubタグを使ってみましょう。
|
1 2 3 4 5 6 7 8 9 |
<html lang="ja"> <head> <title>サンプルページ</title> </head> <body> <div class="main"> 二酸化炭素の化学式は「CO<sub>2</sub>」です。エタノールは「C<sub>2</sub>H<sub>5</sub>OH」です<br> 化学式で過酸化水素は、「Ｈ<span class="m-str-tag"><sub></span>2<span class="m-str-tag"></sub></span>Ｏ<span class="m-str-tag"><sub></span>2<span class="m-str-tag"></sub></span>」です<br> </div> </body> </html> |
実際はこのように表示されます。
サンプルページ
化学式で過酸化水素は、「Ｈ2Ｏ2」です。
このように、化学式でのCO2やC2H5OHやＨ2Ｏ2の、2や5を表しています。
注意すること
- body要素内(<body>～</body>)に書いてください。タイトルなどには使えません。
- <sub>タグは、数式や化学式など、下付き文字にしないと意味が変わってしまう場合にのみ、使います。単に文字を表現のため装飾したいから、下付きにすることに使用するのはしないでください。
- 文字の大きさの設定で、下付き文字の大きさも変化します。文字の大きさを小さく設定してしまうと、下付き文字の大きさが小さくなり過ぎてしまう可能性がありますので注意してください。
数式には、下付き文字がよく使用されます。数式のマークアップには、MathMLの使用が推奨されています。
しかし、複雑な数式のマークアップが必要でなければ、<sub>タグを使うことで簡単な数式をマークアップできます。
supタグとの違い
下付き文字があるのなら、上付き文字もあります。
supタグはsubタグの反対で、上付き文字です。
例えば㎝2の、2になります。
|
1 |
cm<sup>2</sup> |
実際の表示です。
cm2
subタグの参考程度の応用的な使い方
・subタグで脚注番号をつける
基本的な脚注は、下付き文字で表示される番号を使って記述されることもあります。これは subタグのよくある使い方の一つです。
例えばこのサンプルのように使います。
|
1 |
<p>私はこの間、ホームページ制作のためWordpressに、Javascript<sub><a href="#">[1]</a></sub>を利用してみたのだが、どうも難しく思う。</p> |
実際はこのように表示されます。
私はこの間、ホームページ制作のためWordpressに、Javascript[1]を利用してみたのだが、どうも難しく思う。
[1]に詳しい説明を記述します。脚注が増えると数も大きくなっていきます。
・subタグで商標マークなどを表す
商標マークなど、下付きについている物にも使うことができます。
例えばこのようなサンプルです。
|
1 |
<p>商品の名前など<sub>TM</sub></p> |
このように表示されます。
商品の名前などTM
よく見るSMや®なども同じように使います。
・subタグを<var>タグ内に記述する
また、<sub>タグは、<var>タグ内に書くことができます。<var>タグは変数を表す場合に使います。一般的なブラウザでは斜体で表されます。
<var>タグ内に書く場合は、下付き文字が付いてくる変数になります。
参考までに、以下で<var>タグ内に書いたサンプルも見ていきましょう。
|
1 2 3 4 5 6 7 8 9 |
<div class="main"> <var>n</var> 番目の座標は、 (<var>x<sub><var>n</var></sub></var>,<var>y<sub><var>n</var></sub></var>) です。 例えば、10番目の座標は、 (<var>x<sub>10</sub></var>,<var>y<sub>10</sub></var>) です。 </div> |
実際はこのように表示されます。
例えば、10番目の座標は、(x10,y10)です。
このように、下付き文字を伴う変数になりました。
まとめ
いかがでしたか？
今回は、subタグの基本的な使い方と、ちょっとした応用の使い方を説明しました。
基本的にはタグで囲むだけですので、簡単ですね。
subタグは、頻繁には使うことが少ないタグです。しかし、化学式や計算式などに良く使われるので、覚えておくと便利ですよ。
ぜひ、参考にしてみてくださいね。
