化学式を表示してみよう
HTML表示の場合
ホランド鉱の化学式 Ba(Mn4+,Mn2+)8O16
HTMLソース
<font size="3"><font color="#cccccc">Ba(Mn<sup>4+</sup>,Mn<sup>2＋</sup>)<sub>8</sub>O<sub>16</sub></font>
<font size="3"> フォントサイズ（文字サイズ）を指定するタグ。数字の部分に文字サイズを入れる。
<font color="#cccccc"> "〜"の間に16進法のWebセーフカラー色、またはカラーネームを指定する。フォントカラー（文字色）を指定するタグ。
<sup></sup> 上付き文字を指定するタグ。
<sub></sub> 下付き文字を指定するタグ。
スタイルシート表示の場合
ホランド鉱の化学式 Ba(Mn4+,Mn2+)8O16
CSSに記述する部分。複数のページにわたって指定する場合は、スタールシートは外部ファイル（拡張子は.css）に記述しておく方がやりやすい。
*.sup
{ /* 上付 */
font-size: 9pt;
position: relative;
top: -0.4em; }
*.sub
{ /* 下付 */
font-size: 9pt;
position: relative;
top: 0.3em; }
.test1 { font-size:12pt; color:#cccccc;
line-height:17pt;
text-align:left; }
*.supの部分は上付き文字を指定、*.subの部分は下付き文字を指定するスタールシート。
font-size:の部分で文字のフォントサイズを指定する。
top:の部分で上付き下つき文字の表示位置を指定する。
*.supの場合、マイナスの数値を上げれば上付きに指定した文字の位置が上がる。
*.subの場合、数値を上げれば下付きに指定した文字の位置が下がる。
.test1の部分でフォントカラー、行間、文字の配置（左寄せ・右寄せ・センタリング）と上付き・下付き以外のフォントサイズを指定する。
HTMLに記述する部分。
先頭部分の<head>〜</head>の間に<link rel=stylesheet href="ファイル名.css" type="text/css">を記述する。
HTMLファイルに対し外部CSSファイルを適用するため。
化学式部分
<p class="test1">
Ba(Mn<span class="sup">4+</span>,Mn<span class="sup">2＋</span>)<span class="sub">8</span>O<span class="sub">16</span></p>
<p class="test1">と</p> CSSの.test1で指定したフォントカラー等のスタールシートを適用するタグ。
p要素は<p>〜</a>で囲んだ範囲が一つの段落であることを表すのに使われる。
単に1行2行と改行をしたい場合は<br>を使用する。
<span class="sup"></span> CSSの*.supで指定した上付き文字のスタールシートを適用するタグ。
<span class="sub"></span> CSSの*.subで指定した下付き文字のスタールシートを適用するタグ。
span要素は<span>〜</span>で囲んだ範囲にスタイルシートや言語を適用するのに使われる。
前ページに戻る