Program

HTML

Equation [数式]

HTMLで数式を記述してみよう

HTML3.0で採用されたはずの数式表現用のタグが、実際にはほとんどブラウザが対応してくれなくて使えない。みなさん、数式の部分だけ画像で埋め込んだり、 PDF文書にしたりいろいろ苦心してる。

ところがね、現行のHTMLでもスタイルシート・テーブル・ Symbolフォントを活用すれば、 Texにはかなわないとはいえ、ある程度は書けるんです。

数式用のテーブルとフォント

数式は一行毎にテーブルにして、配置を調整します。 paddingは上下を0、左右を2ptぐらい。配置は上下左右中央がいいでしょう。

いちいち設定するのは面倒なんで、スタイルシートにしちゃおう。数学記号とか補助的に使いたいフォントも用意しておきます。

特殊なフォントは環境によっては表示できなかったりするので、表示できるかどうかチェックしといて下さい。標準フォントと同じだったら表示できてないってことです。

いろんなフォントのコード一覧。
標準, Symbol, MT Extra, (おまけ)Webdings

ネスケだと全般的に表示できないようです。 "Symbol"フォントだけでも表示できれば何とかなるんですが・・。どなたか、ネスケで表示させる方法知ってたら教えてください。

CSS Code


<style type="text/css">
<!--

.s
	{font-family:symbol;}

.mt
	{font-family:MT Extra;}

table.eq
	{			/* Eqation */
	text-align:center;
	vertical-align:center;
	padding:0 2pt;
	}
-->
</style>

これを使って、数学記号毎にセルを区切ったテーブルを組みます。例えばこんな感じ。

関数

積分

ƒ(x)=

ó
õ

^t1
_t0

X²dt

→

ƒ(x)=

ó
õ

^t1
_t0

X²dt

HTML Code


<table class=eq><tr>

	<td>&fnof;(x)=</td>			<!-- 関数 -->
	<td class=s>&#243;<br>&#245;</td>	<!-- 積分(Symbol) -->
	<td><sup>t1</sup><br><sub>t0</sub></td>
	<td class=s>&#229;</td>		<!-- 和(Symbol) -->
	<td>X<sup>2</sup>dt</td>		<!-- 指数とか -->

</tr></table>

配列

配列の場合は、左右に大きめの括弧を置いて、その間のセルにテーブルの入れ子を作ります。

ベクトル

配列

A^-1=

ì
ï
ï
î

a₁₁	a₁₂	a₁₃
a₂₁	a₂₂	a₂₃
a₃₁	a₃₂	a₃₃

ü
ï
ï
þ

^-1

→

A^-1=

ì
ï
ï
î

a₁₁	a₁₂	a₁₃
a₂₁	a₂₂	a₂₃
a₃₁	a₃₂	a₃₃

ü
ï
ï
þ

^-1

HTML Code


<table class=eq >
  <tr>
  <td><b>A</b><sup>-1</sup>=</td>
  <td class=S>&#236;<br>&#239;<br>&#239;<br>&#238;</td>	<!-- 括弧 -->
  <td><table>				<!-- 配列の中身（テーブルの入れ子） -->
      <tr><td>a<sub>11</sub></td><td>a<sub>12</sub></td><td>a<sub>13</sub></td></tr>
      <tr><td>a<sub>21</sub></td><td>a<sub>22</sub></td><td>a<sub>23</sub></td></tr>
      <tr><td>a<sub>31</sub></td><td>a<sub>32</sub></td><td>a<sub>33</sub></td></tr>
    </table>
  </td>
  <td class=s>&#252;<br>&#239;<br>&#239;<br>&#254;</td>	<!-- 括弧 -->
  <td><sup>-1</sup><br><br><br><br></td>
  </tr>
</table>

分数・ルート

分数、ルートの表記にはもうひと工夫必要です。分数やルートの横線は、セルのTopのBorderだけ表示させます。

これもスタイルシートに設定しておきましょう。

CSS Code


td.div
	{			/* Divide */
	border-top:1pt solid black;
	padding-top:2pt;
	}

ルートは上の線の位置がうまく表示されるように、いちいちテーブルの入れ子を作った方がいいでしょう。

分数
ルート

ì
í
î

ü
ý
þ

	¤
Ö

→

ì
í
î

ü
ý
þ

	¤
Ö

HTML Code


<table class=eq><tr>
  <td class=s>&#236;<br>&#237;<br>&#238;</td>
  <td><table>			<!-- 分数の入れ子 -->
    <tr><td>A</td></tr>
    <tr><td class=div>B</td></tr>	<!-- 分母 -->
    </table>
  </td>
  <td class=s>&#252;<br>&#253;<br>&#254;</td>
  <td>=</td>
  <td><table>			<!-- ルートの入れ子 -->
    <tr>
      <td class=s>&#214;</td>
      <td class=div>A</td>		<!-- ルートの中身 -->
    </tr>
    </table>
  </td>
  <td class=s>&#180;</td>
  <td valign=top><table cellspacing=0>  <!-- 大きいルート -->
    <tr><td></td><td class=s>&#164;</td></tr>
    <tr><td class=s>&#214;</td></tr>
    </table>
  </td>
  <td class=div><table>		<!-- 分数の入れ子 -->
    <tr><td>B</td></tr>
    <tr><td class=div>C</td></tr>
    </table>
  </td>
</tr></table>

大きなルート記号については、ルートのSymbolフォントを拡大すれば、

・・・しかし、かなり面倒だね。

	Program Top

HTML

Equation [数式]

関数積分

ベクトル配列

分数ルート

関数

積分

ベクトル

配列

分数
ルート