[20] 上付き文字と下付き文字を使おう（sup, sub）

今回は「上付き文字」を表す <sup>要素と「下付き文字」を表す <sub>要素を使いましょう。

使用する要素	<sup> 〜 </sup> <sub> 〜 </sub>

「sup」は「SuperScript」の略、そのまんま「上付き文字」のこと。
「sub」は「SubScript」の略で、これもそのまんま「下付き文字」の意味です。

両方とも大昔からある要素なので、どのブラウザも対応しています。

<sup> と <sub> の基本構造

構造はこれだけ。めっちゃ簡単ですね。

<sup>上付き文字にしたいテキスト</sup>
<sub>下付き文字にしたいテキスト</sub>

<sup>で上付き文字を指定しよう

上付き文字とは、下のサンプルのようにデフォルトの文字より小さい文字でちょっと上につくもの。
（わかりやすいように上付き文字を赤くしています。<sup>で文字色は変わりません。念のため）

（累乗の場合）x² − 3x + 2 = (x − 1)(x − 2)
（平方・立方の単位）120m²　30cm³
（トレードマークとか）インテル® Core^TM

HTMLはこちらです

（累乗の場合）x<sup>2</sup> − 3x + 2 = (x − 1)(x − 2)<br>
（平方・立方の単位）120m<sup>2</sup>　30cm<sup>3</sup><br>
（トレードマークとか）インテル® Core<sup>TM</sup>

<sub>で下付き文字を指定しよう

下付き文字とは、デフォルトの文字より小さい文字でちょっと下につくもの。
（わかりやすいように下付き文字を赤くしています。<sub>で文字色は変わりません。念のため）

（分子式とか）CO₂　H₂O　C₂H₆O

HTMLはこちらです

（分子式とか）CO<sub>2</sub>　H<sub>2</sub>O　C<sub>2</sub>H<sub>6</sub>O

<sup> と <sub> の覚え方（余談ですが）

HTMLで 70m² って書きたかったり、二酸化炭素をCO₂って書きたいとき、この <sup> と <sub> を覚えていると ほんっとに便利です。

ただ、非常に似てて どっちがどっちか覚えにくい。

私は「Super は上向き、Sub は下向き」などと意味で覚えています。

<sup> の「p」と <sub> の「b」のカタチから「◯が上に付いてるのが上付、下なのが下付き」と言ってる人もいたなあ。

まあ、どっちがどっちかわからないだけなら、一回書いてブラウザで見てみりゃイイんです。<sup> と <sub> を覚えていることが一番大事だったりしますwww

次回予告

次回は、 文章中の単語やフレーズを強調したいときに使う要素について。
重要性を表す<strong> と、強調を表す<em> の違いを見てみましょう。