サイト制作に関するメモ書き

HOME > HTML・CSS > HTMLでの上付き文字と下付き文字の設定方法

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

個人的に普段あまり使うことがないので忘れがちですが、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;で相対的に文字サイズを小さくしています。
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP