HTMLでの上付き文字と下付き文字の設定方法

2019.01.31

個人的に普段あまり使うことがないので忘れがちですが、HTMLで上付き文字と下付き文字を設定するタグについてメモ。

サンプルコード

上付き文字は「sup」、下付き文字は「sub」を使います。

<p>πr<sup>2</sup></p>
<p>H<sub>2</sub>O</p>

CSSで設定したい場合、vertical-align: superで上付き文字、vertical-align: subで下付き文字になるようです。

<p>πr<span class="sup">2</span></p>
<p>H<span class="sub">2</span>O</p>

.sup {
	vertical-align: super;
	font-size: smaller;
}
.sub {
	vertical-align: sub;
	font-size: smaller;
}

CSSで設定するデモページ
font-size: smaller;で相対的に文字サイズを小さくしています。
　

【参考サイト】

土