supとsubをガタガタさせずに綺麗に出す

一般的なサイトではあまり使うこともないsupとsub。何のタグ？という方もいらっしゃるのでは？（そんな方はこの記事に行き当たらないと思いますが）
supとsubはいわゆる「上付き」「下付き」を表示するためのタグで、学術系サイトや資材系の企業サイトを制作する際にはCO2、ｍ3など単位の表現で意外と出番が多いタグだったりします。
シトラスデザインでは学会や建設業、金属資材及び加工業の企業サイト制作を過去にいくつか手がけており、相当お世話になっているタグです。

supとsubはそのままHTMLで記述するだけだと、ちょっと上や下に飛び出しすぎた見た目になってしまうのが難点。そこで本日は、これをいい感じに綺麗な文章ラインに仕上げるコツです。

HTMLの素材そのままのお味で

sup

sub

CSSで滑らかななお味に

上下に飛び出すsupとsubをCSSで調整します。vertical-alignとpositionで位置を整え、font-sizeでやや小さめにします。位置調整の単位で使っているexはアルファベットの小文字の「x」の高さを基準とした単位です。

sup{
  vertical-align: baseline;
  position: relative;
  top: -1ex;
  font-size:0.6em;
}

sub{
  vertical-align: baseline;
  position: relative;
  top: 0ex;
  font-size:0.6em;
}

sup

sub

いい感じに収まりましたね。この記述はリセットCSSに入れておけば使いまわしも効いて便利です。
それではまた。