sub 下付きテキストで化学式表記 コピペで使えるHTML+CSS

スポンサーリンク
LINEで送る
Pocket

sub要素の概要

下付きテキストHTML
<sub>~</sub>
目的化学式などの表記。
関連<sup>
ポリアセタールの化学式は、CH3CO[OCH2CH2]nOCOCH3
ポリアセタールの化学式は、CH<sub>3</sub>CO[OCH<sub>2</sub>CH<sub>2</sub>]<sub>n</sub>OCOCH<sub>3</sub>

属性

グローバル属性のみ

CSSデザイン

数字部分に黄色の背景をつける

background-colorで指定する。黄色は#ffff00

ポリアセタールの化学式は、CH3CO[OCH2CH2]nOCOCH3
スタイルシートで記述
ポリアセタールの化学式は、<span class="yellow-sub">CH<sub>3</sub>CO[OCH<sub>2</sub>CH<sub>2</sub>]<sub>n</sub>OCOCH<sub>3</sub></span>
.yellow-sub sub{ /* yellow-subクラスを持つ要素の子のsub要素に適用するという意味 */
    background-color:#ffff00;
}
LINEで送る
Pocket

タイトルとURLをコピーしました