sup(上付き文字)・sub(下付き文字)のcssでの指定方法

   2017年5月11日

初歩的なことですがたまにどっちがどっちだったか、指定法をど忘れしてしまうのでメモ。
上付き・下付きがどんなものかというとこんなかんじです。↓

100m2
CO2

みれば「あ~(笑)」ってかんじですよね。

上のはこんなかんじで書いてます。

HTML


100m<sup>2</sup>
CO<sub>2</sub>

CSS


sup {
font-size: 70%; //お好きなサイズに
vertical-align: top;
position: relative;
top: -0.1em; //お好きな位置に
}
sub {
font-size: 70%; //お好きなサイズに
vertical-align: bottom;
position: relative;
bottom: -0.1em; //お好きな位置に
}

上記ではvertical-align: top or bottomで指定していますが
vertical-alignには、上付き・下付き用の指定もあります。

CSS


sup {
font-size: 70%; //お好きなサイズに
vertical-align: super;
}
sub {
font-size: 70%; //お好きなサイズに
vertical-align: sub;
}

位置を指定しなくても移動してくれています。
見た目はこんなかんじ。

100m2
CO2

htmlの書き方は一緒です。

web tipsの記事