【HTMLタグ】上付き文字と下付き文字を表示する方法


上付き文字・下付き文字とは、文字横にくっついて表示される小文字のこと。

たとえば、H2、H2のようなもの。これを応用すれば、分数などが表現できるので、インチ表示などに役立ちます。

以下で、上付き文字と下付き文字を表示する方法をご紹介します。

HTMLタグで「上付き文字」を表示する

上付き文字を表示させるタグは、<sup>

書き方としては、以下のようになります。

<sup>上付き文字にしたい文字</sup>

これらのタグは、インライン要素なので、文中に用いても、改行されることはないので、『a2=b2+c2』のような数式を記入することも可能。

CSSで表示を整えることもできます。

標準設定では、以下のようになっています。

sup {
  vertical-align: super;
  font-size: smaller;
}

『padding-left:10px;』と記述すれば、『a2=b2+c2』となり、上付き文字が右に10px移動します。

『color:#ff0000;』と記述すれば、『a2=b2+c2』となり、上付き文字だけが赤くなります。

スポンサーリンク

HTMLタグで「下付き文字」を表示する

上付き文字を表示させるタグは、<sub>

書き方としては、以下のようになります。

<sub>下付き文字にしたい文字</sub>

これらのタグは、インライン要素なので、文中に用いても、改行されることはないので、『NH4NO3』のような化学記号を記入することも可能。

こちらもCSSで表示を整えることもできます。

標準設定では、以下のようになっています。

sup {
  vertical-align: sub;
  font-size: smaller;
}

vertical-align: baseline;と記述すると、『NH4NO3』となり、垂直位置がそろいます。

さらに、font-size:x-small;と記述すると、『NH4NO3』となり、文字のバランスが、より良くなります。

スポンサーリンク

分数を表示する

2分の1を表示させる場合、斜線を使って「1/2」としていませんか?

この表示でも問題ないかもしれません。

ですが、たとえば、「1 1/2」を表示する場合、非常にわかりにくくなります。そのため、3/2と表示したり、1・1/2と書くかもしれません。

しかし、これだとブサイクですよね。

僕ならこう書きます。

/

コードで書くと下のようになります。

1<sup>1</sup>/<sub style="vertical-align: baseline;">2</sub>
スポンサーリンク
ページ先頭へ