BLOG ブログ

> ブログ

こんにちは!WEBデザイナーのこたです。

平方メートル(m2)などの単位や、元素記号の表示、注釈などで表示に困ったことありませんか?

企業サイトやECサイトなどで、平方メートルと単位を表示する機会は意外とあったりします。
製品仕様の説明や長いテキストを掲載するときに、注釈をつけるため文章の途中に「*」などのマークをつけるとこはよくあります。
そうしたときに役立つのが、上付き文字を表示するsupタグです。
下付き文字を表示するsubタグをsupタグに比べて使う機会は少ないかもしれませんが、元素記号などを表示するときに使われます。

sup要素とsub要素を使った表記方法

上付き文字を表示

下付き文字を表示

See the Pen
eYvYRML
by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

CSSのvertical-alignで上付き文字や下付き文字を表示

CSS側で装飾をする場合にはvertical-alignプロパティを使用します。

vertical-alignの値をsuperにした場合は上付き文字に、値をsubにした場合は反対に下付き文字になります。
上付き文字にするのと同時に大きさなどの調整をしたい場合にはCSSファイルにまとめて記述することで同時に調整が出来るようになります。

See the Pen
XWMWgPO
by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

まとめ

今回は初心者向けにHTMLで上付き下付き文字を使って数式や化学式を書く方法についてご紹介しました。
数式や化学式をブラウザ上に表示する場合、上付き文字や下付き文字が必要になることがあります。
sup要素とsub要素を使った表記方法を覚えておくと役に立つので覚えておきましょう!