Web模様

未経験からWebデザイナーになった私の備忘録

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

   

supsub

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

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