HTMLで『㎥』や『※』など右上or右下に小さな文字を付ける方法

今回は、HTMLのタグを使ってm²やCO₂や^※1の様に記号や数字などの任意の文字をメインテキストの上下に付ける方法を紹介します。

今回使用するHTMLタグは「sup」と「sub」です。

「sup」はテキストの上にテキストを表示させます。
「sub」はテキストの下にテキストを表示させます。

実際の記述の例は以下です。

<p>「m<sup>2</sup>」「CO<sub>2</sub>」「<sup>※</sup>1」</p>

実際の表示は下記。

「m²」「CO₂」「^※1」

また「sup」と「sub」は基本的にどんなテキストでも付ける事が出来ます。漢字、2文字以上、「sup」の中に「sup」を付ける事も可能です。

_{_AA}A^{A^A}　20^才　^HP500

<p><sub><sub>A</sub>A</sub>A<sup>A<sup>A</sup></sup>　20<sup>才</sup>　<sup>HP</sup>500</p>

また左右の位置に関しては、そのタグの位置で調整可能です。

「_XX」手前に置けば左下に、「X_X」右に置けば右下に。

<p>「<sub>X</sub>X」手前に置けば左下に、「X<sub>X</sub>」右に置けば右下に。</p>

スタイルも付ける事は可能です。（主に色や太さなど。）

色_赤も付けれる。

<p>色<sub style="color:red">赤</sub>も付けれる。</p>

以上が「HTMLで『㎥』や『※』など右上or右下に小さな文字を付ける方法」でした。

普段は使う事は無いとは思いますが、工業系のコーポレートサイトでたまに使うかな？といった技術です。重要度は低いが一応こんなタグあったなと頭の片隅においときましょう。