HTML テキスト 上付文字「sup要素」と下付文字「sub要素」

普通の文字<ここから上付文字>上付文字<ここまで上付文字>
<ここから下付文字>下付文字<ここまで下付文字>

上付文字「sup要素」

 2の2乗(22)の2乗の部分や、トレードマーク(TM)のように
これをHTMLであらわすには、「sup要素」を使います。
<sup>と</sup>で囲んだ範囲のテキストが上付文字になります。

 使い方はもう簡単ですね。数学のべき乗やトレードマーク、面積の単位m2や電離式、参考文献・注釈の番号などなど。

 ちなみに、「sup要素」の「sup」はSuperscriptの略です。
「上付きの」という意味や、「上付きの文字」という意味があります。

下付文字「sub要素」

 上付文字があるのなら下付文字もあります。H2Oのように。
これをHTMLであらわすには、「sub要素」を使います。
<sub>と</sub>で囲んだ範囲のテキストに取消線を引きます。

 こちらももう使い方と使い時は簡単です。化学式や化学反応式などに使います。

 ちなみに、「sub要素」の「sub」はSubscript(取消線)の略です。
「下付きの」という意味や、「下付きの文字」という意味があります。

サンプル

 今回説明した、「sup要素」と「sub要素」を使用したサンプルを用意します。
このサンプルソースはbody要素内(<body>~</body>)に書いてください。

サンプルソースコード

2<sup>10</sup> = 1024<br>
1平方メートルは1m<sup>2</sup>、1立方メートルは1m<sup>3</sup>、9.8メートル/毎秒毎秒は9.8m/s<sup>2</sup><br>
水素イオンはH<sup>+</sup>、水酸化物イオンはOH<sup>-</sup><br>
二酸化炭素の化学式はCO<sub>2</sub>、エタノールはC<sub>2</sub>H<sub>5</sub>OH<br>
硫化銅の電離は CuCl<sub>2</sub> → Cu<sup>2+</sup> + 2Cl<sup>-</sup><br>

 (<br>とは「改行」を意味する要素です。)

表示結果

210 = 1024
1平方メートルは1m2、1立方メートルは1m3、9.8メートル/毎秒毎秒は9.8m/s2
水素イオンはH+、水酸化物イオンはOH-
二酸化炭素の化学式はCO2、エタノールはC2H5OH
硫化銅の電離は CuCl2 → Cu2+ + 2Cl-

「sup要素」と「sub要素」のまとめと次回記事について

 今回説明した「sup要素」と「sub要素」は使いどころが限られていますが、単純明快で非常に簡単な要素でした。

 次回はふりがな(ルビ)をふる「ruby要素」の説明します。
以上、当サイト管理人のAsterismでした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


上の画像に表示されている英数字を入力してください *

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>