Webページで方程式、分数、平方根（ルート）、累乗（2乗、3乗）、数列、微分・積分、行列といった数式を表示するにはどうすれば良いでしょうか？ 複雑な数式をWebページで表示する方法をサンプルつきで紹介します。
目次
はじめての方へ
Webページに数式を表示するには MathML というマークアップ言語と MathJax という JavaScript ライブラリを用います。MathML と MathJax について初めての方は Webページに数式を表示する方法を徹底解説 – 導入編 – および はじめての MathML を参照ください。
分数
分数を表示するには <mfrac> を使います。必要に応じて分子・分母をグループ化タグ <mrow> で囲みます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<math> <mfrac> <mrow> <mi>x</mi> <mo>+</mo> <mn>1</mn> </mrow> <mn>3</mn> </mfrac> <mo>+</mo> <mfrac> <mn>2</mn> <mn>7</mn> </mfrac> </math> |
一次方程式・連立方程式
一次方程式
|
1 2 3 4 5 6 7 8 9 10 11 |
<math> <mi>x</mi> <mo>-</mo> <mn>2</mn> <mo>=</mo> <mn>3</mn> <mo>⁢<!--INVISIBLE TIMES--></mo> <mi>x</mi> <mo>+</mo> <mn>4</mn> </math> |
<mo>⁢<!–INVISIBLE TIMES–></mo> という記述は無くても表示上の問題ありませんが、数学的な意味を考慮するならつけておきましょう。
連立方程式
連立方程式は数学としては初歩的ですが、MathML で表示するのは少し複雑です。テーブルを組むための <mtable> というタグを使います。
<mtable> は HTML の <table> タグと同様です。<mtr> は <tr>、<mtd> は <td> に対応します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<math> <mo>{</mo> <mtable> <mtr> <mtd> <mi>x</mi> <mo>+</mo> <mi>y</mi> <mo>=</mo> <mn>6</mn> </mtd> </mtr> <mtr> <mtd> <mn>3</mn> <mo>⁢<!--INVISIBLE TIMES--></mo> <mi>x</mi> <mo>+</mo> <mi>y</mi> <mo>=</mo> <mn>2</mn> </mtd> </mtr> </mtable> </math> |
累乗（2乗、3乗）、上付き添字
2乗、3乗…を表示するには <msup> タグを使用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<math> <mn>5</mn> <mo>⁢<!--INVISIBLE TIMES--></mo> <msup> <mi>x</mi> <mn>3</mn> </msup> <mo>+</mo> <msup> <mi>x</mi> <mn>2</mn> </msup> </math> |
二次関数・三次関数 / 二次方程式・三次方程式
二次関数・三次関数 / 二次方程式・三次方程式も同様に <msup> で表示できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<math> <mi>y</mi> <mo>=</mo> <msup> <mi>x</mi> <mn>3</mn> </msup> <mo>-</mo> <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>-</mo> <mn>4</mn> <mo>⁢<!--INVISIBLE TIMES--></mo> <mi>x</mi> <mo>+</mo> <mn>1</mn> </math> |
指数・指数関数
指数関数は <msup> で表示できます。
|
1 2 3 4 5 6 7 8 |
<math> <mi>y</mi> <mo>=</mo> <msup> <mi>a</mi> <mi>x</mi> </msup> </math> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<math> <mi>y</mi> <mo>=</mo> <msup> <mfenced> <mfrac> <mrow> <mn>1</mn> </mrow> <mn>3</mn> </mfrac> </mfenced> <mrow> <mi>x</mi> </mrow> </msup> </math> |
上記サンプルコードの <mfenced> は丸括弧を表示するタグです。
<msup> の応用例
<math>とグループ化タグ <mrow> を合わせて使う応用例
|
1 2 3 4 5 6 7 8 9 10 |
<math> <msup> <mi>e</mi> <mrow> <mi>x</mi> <mo>+</mo> <mn>1</mn> </mrow> </msup> </math> |
添字（下付き添字）
添字を表示するには<msub> タグを使います。
|
1 2 3 4 5 6 |
<math> <msub> <mi>x</mi> <mi>i</mi> </msub> </math> |
対数・対数関数
対数・対数関数は <msub> タグで表示できます。
|
1 2 3 4 5 6 7 8 9 10 |
<math> <mi>y</mi> <mo>=</mo> <msub> <mi>log</mi> <mi>a</mi> </msub> <mo>⁡<!--FUNCTION APPLICATION--></mo> <mi>x</mi> </math> |
<mo>⁡<!–FUNCTION APPLICATION–></mo> という記述は無くても表示上の問題ありませんが、数学的な意味を考慮するならつけておきましょう。
自然対数の底e（ネイピア数）
自然対数の底（ネイピア数）は通常アルファベットの e で表示されますが、もしかすると単なる変数 e かもしれません。自然対数の底（ネイピア数）であることを正確に表示するため ⅇ を使うことがあります。
|
1 2 3 4 5 6 7 8 |
<math> <msub> <mi>log</mi> <mi>ⅇ</mi> </msub> <mo>⁡<!--FUNCTION APPLICATION--></mo> <mi>x</mi> </math> |
添字（上下添字）
上下に添字を表示するには<msubsup> タグを使います。
|
1 2 3 4 5 6 7 |
<math> <msubsup> <mi>x</mi> <mi>i</mi> <mi>j</mi> </msubsup> </math> |
平方根・ルート
平方根（ルート）を表示するには <msqrt> タグを使います。
|
1 2 3 4 5 6 7 |
<math> <msqrt> <mi>x</mi> <mo>+</mo> <mn>1</mn> </msqrt> </math> |
立方根（三乗根）
立方根（三乗根）を表示するには <mroot> タグを使います。
|
1 2 3 4 5 6 7 8 9 10 |
<math> <mroot> <mrow> <mi>x</mi> <mo>+</mo> <mn>1</mn> </mrow> <mn>3</mn> </mroot> </math> |
n乗根のような一般形も同様です。
|
1 2 3 4 5 6 |
<math> <mroot> <mi>a</mi> <mi>n</mi> </mroot> </math> |
複素数・虚数
複素数・虚数には2通りの表示方法があります。
|
1 2 3 4 5 |
<math> <mn>3</mn> <mo>+</mo> <mi>i</mi> </math> |
もしかすると i は単なる変数かもしれません。虚数単位の記号iであることを正確に表現するには ⅈ を使います。
|
1 2 3 4 5 |
<math> <mn>3</mn> <mo>+</mo> <mi>ⅈ</mi> </math> |
シグマ（数列の和）
シグマ記号を表示するには ∑ または ∑ を使います。∑ を使う場合にはコメントアウトを入れましょう。munderover タグで囲み、開始と終了を記述します。
|
1 2 3 4 5 6 7 8 9 10 11 |
<math> <munderover> <mi>∑</mi> <mrow> <mi>k</mi> <mo>=</mo> <mn>1</mn> </mrow> <mi>n</mi> </munderover> </math> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<math> <munderover> <mi>∑<!--N-ARY SUMMATION--></mi> <mrow> <mi>k</mi> <mo>=</mo> <mn>1</mn> </mrow> <mi>n</mi> </munderover> <mrow> <mi>f</mi> <mo>⁡<!--FUNCTION APPLICATION--></mo> <mfenced> <mi>x</mi> </mfenced> </mrow> </math> |
三角関数（sin / cos / tan）
sin x / cos x / tan x は特別なタグは不要で <mi> で表示できます。ただし、下記ソースコードのように sin と x は別々に囲みます。
|
1 2 3 4 5 |
<math> <mi>sin</mi> <mo>⁡<!--FUNCTION APPLICATION--></mo> <mi>x</mi> </math> |
<mo>⁡<!–FUNCTION APPLICATION–></mo>
という記述は無くても表示上の問題ありませんが、数学的な意味を考慮するならつけておきましょう。
x の代わりに θ（シータ） で記述したいなら θ というコードで表示可能です。
|
1 2 3 4 5 6 7 8 9 10 |
<math> <mi>tan</mi> <mo>⁡<!--FUNCTION APPLICATION--></mo> <mi>θ</mi> <mo>=</mo> <mfrac> <mi>b</mi> <mi>c</mi> </mfrac> </math> |
角度を数字で表示するには ∘ を使います。
|
1 2 3 4 5 6 7 8 |
<math> <mi>cos</mi> <mo>⁡<!--FUNCTION APPLICATION--></mo> <msup> <mn>60</mn> <mo>∘<!--RING OPERATOR--></mo> </msup> </math> |
ベクトル
ベクトルを表示するには <mover> タグを使います。下のソースコードのように矢印には → または → を使います。→
の場合にはコメントアウトをつけておきましょう
|
1 2 3 4 5 6 7 8 |
<div> <math> <mover> <mi>v</mi> <mo>→</mo> </mover> </math> </div> |
|
1 2 3 4 5 6 |
<math> <mover> <mi>b</mi> <mo>→<!--RIGHTWARDS ARROW--></mo> </mover> </math> |
２文字で表すベクトルも同じです。
|
1 2 3 4 5 6 |
<math> <mover> <mi>AB</mi> <mo>→<!--RIGHTWARDS ARROW--></mo> </mover> </math> |
行列
丸括弧の行列
行列を表示するには <mfenced> と <mtable> タグを使用します。<mfenced> は外側の括弧、<mtable> は中の要素を表示します。
<mtable> は HTML の <table> タグと同様です。<mtr> は <tr>、<mtd> は <td> に対応します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<math> <mfenced> <mtable> <mtr> <mtd> <mn>11</mn> </mtd> <mtd> <mn>12</mn> </mtd> <mtd> <mn>13</mn> </mtd> </mtr> <mtr> <mtd> <mn>21</mn> </mtd> <mtd> <mn>22</mn> </mtd> <mtd> <mn>23</mn> </mtd> </mtr> </mtable> </mfenced> </math> |
角括弧の行列
<mfenced open=”[” close=”]”> とすれば角括弧の行列になります。open と close の属性値を指定すれば | | や { } で表示することもできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<math> <mfenced open="[" close="]"> <mtable> <mtr> <mtd> <mn>11</mn> </mtd> <mtd> <mn>12</mn> </mtd> <mtd> <mn>13</mn> </mtd> </mtr> <mtr> <mtd> <mn>21</mn> </mtd> <mtd> <mn>22</mn> </mtd> <mtd> <mn>23</mn> </mtd> </mtr> </mtable> </mfenced> </math> |
極限・微分・積分
極限（lim）
極限（lim）の表示には特別なタグはありません。基本的な MathML タグの組み合わせ表現できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<math> <munder> <mi>lim</mi> <mrow> <mi>x</mi> <mo>→<!--RIGHTWARDS ARROW--></mo> <mn>0</mn> </mrow> </munder> <mfrac> <mrow> <mi>sin</mi> <mo>⁡<!--FUNCTION APPLICATION--></mo> <mi>x</mi> </mrow> <mi>x</mi> </mfrac> <mo>=</mo> <mn>1</mn> </math> |
微分
物理で頻出する単位時間あたりの移動量 dx/dt を MathML で表示すると以下となります。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<math> <mfrac> <mrow> <mi>d</mi> <mi>x</mi> </mrow> <mrow> <mi>d</mi> <mi>t</mi> </mrow> </mfrac> </math> |
通常は上記で良いですが、d が変数dではなく、微分記号d ということを正確に伝える場合は ⅆ を用います。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<math> <mfrac> <mrow> <mo>ⅆ</mo> <mi>x</mi> </mrow> <mrow> <mo>ⅆ</mo> <mi>t</mi> </mrow> </mfrac> </math> |
積分
積分（インテグラル）は ∫ または ∫ を使って表示します。∫ の場合にはコメントアウトをつけておきましょう。
区間については <msubsup> または <munderover> を使います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div> <math> <msubsup> <mo>∫</mo> <mn>0</mn> <mn>1</mn> </msubsup> <mi>x</mi> <mrow> <mi>d</mi> <mi>x</mi> </mrow> </math> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<math> <msubsup> <mo>∫<!--INTEGRAL--></mo> <mn>0</mn> <mi>∞<!--INFINITY--></mi> </msubsup> <mfrac> <mrow> <mi>d</mi> <mi>x</mi> </mrow> <mi>x</mi> </mfrac> </math> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<math> <munderover> <mo>∫<!--INTEGRAL--></mo> <mn>0</mn> <mi>∞<!--INFINITY--></mi> </munderover> <mfrac> <mrow> <mi>d</mi> <mi>x</mi> </mrow> <mi>x</mi> </mfrac> </math> |
数学記号や文字を調べる方法
± ≠ ≥ ∑ ∫ π ∞
これらはほんの一例ですが、数学（数式）には様々な記号や文字があります。これらを文字化けすることなく表示するには、数値文字参照または文字実体参照（参考ページ）を使わなければなりません。
入力したくてもコードがわからない場合には、下記ページが頼もしい味方になってくれるでしょう。
解消しない場合は？
以上の内容で中学・高校数学の多くをカバーできているかと思います。
しかし MathML は数学・物理・化学等あらゆる分野の数学的表現に対応したマークアップ言語で、ここで紹介した内容はその 1％ にも満たないでしょう。
もし何か困った場合には MathML3 に関する公式ドキュメントを参照ください。
コメントを残す