HTML&CSS

CSSで上付きや下付きの文字を整える方法

作成日：2021年06月07日

更新日：2021年06月07日

ウェブサイトを制作しているとき、平方メートルを表示しようとしたら、『15m2』となってしまったこと、ありませんか？

また、化学式を表示しようとしたら、『CO2』となってしまったこと、ありませんか？

平方メートルや商法登録マーク、化学式などをウェブサイトで表示したい場合はどうすればいいのでしょうか？

今回は、CSS で上付きや下付きの文字を整える方法を紹介します。

上付き文字

上付き文字を表示するには、上付きにしたい文字に sup タグを使用します。

コードは、以下になります。

html
<head>
  <style>
    div {
      padding: 5rem;
    }
    .text {
      font-size: 3rem;
    }
  </style>
</head>
<body>
  <div>
    <p class="text">あずきチーズドーナツ<sup>&reg;</sup></p>
  </div>
</body>

ブラウザで確認すると、

商標登録が表示できました。

別の方法として、vertical-align: super;で指定することができます。

コードは、以下になります。

html
<head>
  <style>
    .text {
      font-size: 3rem;
    }
    .top {
      vertical-align: super;
      font-size: 1.6rem;
    }
  </style>
</head>
<body>
  <div>
    <p class="text">15m<span class="top">2</span></p>
  </div>
</body>

ブラウザで確認すると、

平方メートルが正しく表示できました。

下付き文字

上付き文字を表示するには、上付きにしたい文字に sub タグを使用します。

コードは、以下になります。

html
<head>
  <style>
    div {
      padding: 5rem;
    }
    .text {
      font-size: 3rem;
    }
  </style>
</head>
<body>
  <div>
    <p class="text">CO<sub>2</sub></p>
  </div>
</body>

ブラウザで確認すると、

化学式が表示できました。

別の方法として、vertical-align: sub;で指定することができます。

コードは、以下になります。

html
<head>
  <style>
    div {
      padding: 5rem;
      font-size: 3rem;
    }
    .text {
      font-size: 3rem;
    }
    .bottom {
      vertical-align: sub;
      font-size: 1.6rem;
    }
  </style>
</head>
<body>
  <div>
    <p class="text">
      x<span class="bottom">1</span>+ x<span class="bottom">2</span> = y
    </p>
  </div>
</body>