HTML で右下や右上に小さい文字をつけるタグ。CSS は使いません

公開日:
HTML の基礎

立法メートル m3 や平方メートル m2 といった単位、二酸化炭素 CO2 や水 H2O の化学式のように、文字の右上や文字の右下につける小さい文字を HTML で表現する方法は次の通り。

なお CSS を使わなくても表現できます。

文字の右横に小さい文字をつける方法

右上に小さい文字をつける場合

使用するタグは sup です。上付き文字と言われます。

立法メートル: m<sup>3</sup>
数式: x<sup>4</sup> - 1 = (x<sup>2</sup> + 1)(x<sup>2</sup> - 1)
オイラーの定理: e<sup>πi</sup> = -1
  • 立法メートル: m3
  • 数式: x4 – 1 = (x2 + 1)(x2 – 1)
  • オイラーの定理: eπi = -1

右下に小さい文字をつける場合

使用するタグは sub です。下付き文字と言われます。

水: H<sub>2</sub>
炭酸: H<sub>2</sub>CO<sub>3</sub>
  • 水: H2O
  • 炭酸: H2CO3

組み合わせることも可能

これらを組み合わせると数学の log 乗の公式もこのように表現できます。

alogab = b

CSS で表現したい場合

フォントサイズを小さくするのがポイント。

vertical-align プロパティを利用する

CSS コード
span.sup {
  vertical-align: super;
  font-size: smaller;
}
span.sub {
  vertical-align: sub;
  font-size: smaller;
}
HTML コード
立法メートル: m<span class="sup">3</span>
炭酸: H<span class="sub">2</span>CO<span class="sub">3</span>
Log 乗の公式: a<span class="sup">log<span class="sub">a</span>b</span> = b
  • 立法メートル: m3
  • 炭酸: H2CO3
  • Log 乗の公式: alogab = b

CSS だとソースコードが読みづらいですね。

そもそも上付き文字や下付き文字は、装飾ではなくその位置にあることで意味をなしているものです。HTML タグで表現するほうが正しい対応だと思います。

この記事をシェアする

このブログの運営者

NJ

元システムエンジニア。個人事業主として独立して Web サイト運営、ポップデザインや動画制作など、パソコンでモノづくりしています。