スタイルシートの技

スタイルシートで細かい化学式を作成してみよう

化学式（組成式）や数学などの指数には、subやsupと言った要素を使えばいいわけですが、 これらは推奨されてのでスタイルシートで検討する事を考えて見ました。 ちなみに雑学ですが、下付文字は英語では「subscript」、上付文字は「superscript」と言います。 これらのタグはこれらの頭文字3文字を取っている訳ですね。

また、化学式（組成式）においてイオン価数と添え字が共存するような場合には、 スタイルシートならではのテクニックを使って表現する事を考えてみましょう。

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
   <meta http-equiv="content-style-type" content="text/css">
   <title>テキストの装飾</title>
   <style type="text/css">
      *.sub
      {
         /* 下付 */
         font-size: 0.8em;
         position: relative;
         top: 0.4em;
      }
      *.sup
      {
         /* 上付（イオン価数） */
         font-size: 0.8em;
         position: relative;
         top: -0.6em;
      }
      
      *.ion
      {
         /* 下付＋イオン価数 */
         font-size: 0.8em;
         position: relative;
         top: -0.6em;
         left: -0.6em;
      }
   </style>
</head>
<body>
   <h1>スタイルシートで化学式</h1>
   <dl>
      <dt>二酸化珪素に沸酸をかけた時<dt>
         <dd>SiO<span class="sub">2</span> + 6HF
            → H<span class="sub">2</span>SiF<span class="sub">6</span>
               + 2H<span class="sub">2</span>O<dd>
      <dt>アンモニア水溶液<dt>
         <dd>NH<span class="sub">3</span> + H<span class="sub">2</span>O
            ←→ NH<span class="sub">4</span><span class="ion">+</span>
               + OH<span class="sup">-</span></dd>
   </dl>
</body>
</html>
二酸化珪素に沸酸をかけた時
SiO2 + 6HF → H2SiF6 + 2H2O
アンモニア水溶液
NH3 + H2O ←→ NH4+ + OH-

このようになります。アンモニウムイオンはsub/sup要素を使うと、NH4+ のように表示されますが、 「4」と「+」の間が広がりすぎているので、スタイルシートを有効活用すると NH4+のようになります。 下付数字とイオン価数が重なる場合には、「+」の位置を左へ移動させています。 これを行っているのが「position: relative; left: -0.6em;」です。座標を負に指定する事によって詰めています。これで化学式らしくなりましたね。 sup/subに比べると記述量が増えてしまいますが、下付のフォントなども制御できたりして自由度はこちらに分があると思います。

positionについては領域内の座標を制御するスタイルシート属性です。 この場合は『現在の「+」の初期座標から見て相対座標で左へ-0.6emだけ移動させなさい』という命令になります。 dl,dt,dd要素だけを使ってクールな日記を作成する の最後に紹介されています。上級編なので少し難しいかもしれませんが、説明だけなら理解できると思いますので読み通してみてください。

さて、もうちょっと遊んで見ましょう。アンモニア水溶液の所の反応式は平衡状態を表している訳ですが、「←→」では少々不格好ですね。 画像を使って、矢印を二段に重ねてしまっても良いのですが、文字に対するスタイルシートで何とかやってみましょう。

スタイルシート設定部分
*.leftarrow
{
   position: relative;
   top: -0.3em;
   left: 0.4em;
}
*.rightarrow
{
   position: relative;
   top: 0.3em;
   right: 0.4em;
}
HTML部分
NH<span class="sub">3</span> + H<span class="sub">2</span>O
   <span class="leftarrow">←</span><span class="rightarrow">→</span>
      NH<span class="sub">4</span><span class="ion">+</span>
         + OH<span class="sup">-</span>
NH3 + H2O ←→ NH4+ + OH-

このようになります。ちょっとコードが長くなりましたが色々とできそうですね。 上下の矢印の間隔はtopの値などを適宜調整すれば縮めたり広めたりできます。

top