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

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

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

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

上付き文字

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

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

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

ブラウザで確認すると、

image2

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

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

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

<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>

ブラウザで確認すると、

image3

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

下付き文字

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

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

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

ブラウザで確認すると、

image4

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

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

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

<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>

ブラウザで確認すると、

image5

数式が表示できました。

上付き文字や下付き文字は、たまに表示する機会があります。

その時は、ぜひ試してみてください。

ブログ一覧