【MathML】数式をWebに載せる方法

数式をWeb上で表示するためのマークアップ言語である「MathML」の使い方について紹介します。「MathML」は未対応のブラウザが多いので、「MathJax」というライブラリが必要です。

MathMLとは?

MathML(Mathematical Markup Language) は、HTMLタグを使用して数式をマークアップする手段を提供します。

ただし、 Chrome Edge などのブラウザでは MathML に対応できていません。

未対応のブラウザでも数式を表示するには、 MathJax というJavaScriptのライブラリが必要です。

数式を表示する他の方法
LaTeX ASCIIMathMLといった方法もあります。MathJaxはこれらの方法もサポートしています。

MathJaxの導入方法

CDN 経由で MathJax を利用できます。

<script type="text/javascript" async
        src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=MML_SVG"></script>

configパラメーター で「どのフォーマットを利用するのか」「どのように出力するのか」といった設定を指定できます。詳しい情報は以下ページで確認できます。

主なタグ

基礎

タグ 説明
<math> トップレベル要素
<mi> 識別子(identifier)
<mn> 数字(number)
<mo> 演算子(operator)

表、行列などに利用

タグ 説明
<mtable> 表または行列
<mtd> 表または行列のセル
<mtr> 表または行列の列

累乗、添字、積分などに利用

タグ 説明
<msub> 下付き(subscript)
<msup> 上付き(superscript)
<msubsup> 下付き上付きの組

ベクトル、総和、極限などに利用

タグ 説明
<mover> 真上付き
<munder> 真下付き
<munderover> 真下付きと真上付きの組

その他

タグ 説明
<mfenced> 括弧
<mfrac> 分数
<mrow> グループ化された部分式
<msqrt> 平方根

利用例

どうのようにタグが利用されるのか紹介します。

加算 / 減算
( Addition / Subtraction )

4 + 2 + 10 - 3
<math>
  <mn>4</mn>
  <mo>+</mo>
  <mn>2</mn>
  <mo>+</mo>
  <mfenced>
    <mrow>
      <mn>10</mn>
      <mo>-</mo>
      <mn>3</mn>
    </mrow>
  </mfenced>
</math>

乗算 / 除算
( Multiplication / Division )

5 × 3 ÷ 2
<math>
  <mn>5</mn>
  <mo>&times;</mo>
  <mn>3</mn>
  <mo>&divide;</mo>
  <mn>2</mn>
</math>

分数
( Fraction )

x - 1 3
<math>
  <mfrac>
    <mrow>
      <mi>x</mi>
      <mo>-</mo>
      <mn>1</mn>
    </mrow>
    <mn>3</mn>
  </mfrac>
</math>

絶対値
( Absolute value )

| - a |
<math style="margin-bottom: 16px">
  <mo>|</mo>
  <mrow>
    <mo>-</mo>
    <mi>a</mi>
  </mrow>
  <mo>|</mo>
</math>

連立方程式
( Simultaneous equations )

{ 2 x - y = 1 x + 2 y = 8
<math>
  <mo>{</mo>
  <mtable>
    <mtr>
      <mtd>
        <mn>2</mn>
        <mi>x</mi>
        <mo>-</mo>
        <mi>y</mi>
        <mo>=</mo>
        <mn>1</mn>
      </mtd>
    </mtr>
    <mtr>
      <mtd>
        <mi>x</mi>
        <mo>+</mo>
        <mn>2</mn>
        <mi>y</mi>
        <mo>=</mo>
        <mn>8</mn>
      </mtd>
    </mtr>
  </mtable>
</math>

関数f(x)
( Function )

f x
<math>
  <mi>f</mi>
  <mo>&ApplyFunction;</mo>
  <mfenced>
    <mrow>
      <mi>x</mi>
    </mrow>
  </mfenced>
</math>

累乗
( Power )

x 3 + x - 1 2
<math>
  <msup>
    <mi>x</mi>
    <mn>3</mn>
  </msup>
  <mo>+</mo>
  <msup>
    <mfenced>
      <mrow>
        <mi>x</mi>
        <mo>-</mo>
        <mn>1</mn>
      </mrow>
    </mfenced>
    <mn>2</mn>
  </msup>
</math>

対数
( Logarithm )

y = log a x
<math>
  <mi>y</mi>
  <mo>=</mo>
  <msub>
    <mi>log</mi>
    <mi>a</mi>
  </msub>
  <mi>x</mi>
</math>

平方根
( Square root )

x
<math>
  <msqrt>
    <mi>x</mi>
  </msqrt>
</math>

三角関数
( Trigonometric function )

tan θ = sin θ cos θ
<math>
  <mi>tan</mi>
  <mi>&theta;</mi>
  <mo>=</mo>
  <mfrac>
    <mrow>
      <mi>sin</mi>
      <mi>&theta;</mi>
    </mrow>
    <mrow>
      <mi>cos</mi>
      <mi>&theta;</mi>
    </mrow>
  </mfrac>
</math>

ベクトル
( Vektor )

v
<math>
  <mover>
    <mi>v</mi>
    <mo>&RightArrow;</mo>
  </mover>
</math>

行列
( Matrix )

1 2 -3 4 2 2 0 5 = 2 12 -6 14
<math>
  <mfenced>
    <mtable>
      <mtr>
        <mtd>
          <mn>1</mn>
        </mtd>
        <mtd>
          <mn>2</mn>
        </mtd>
      </mtr>
      <mtr>
        <mtd>
          <mn>-3</mn>
        </mtd>
        <mtd>
          <mn>4</mn>
        </mtd>
      </mtr>
    </mtable>
  </mfenced>
  <mfenced>
    <mtable>
      <mtr>
        <mtd>
          <mn>2</mn>
        </mtd>
        <mtd>
          <mn>2</mn>
        </mtd>
      </mtr>
      <mtr>
        <mtd>
          <mn>0</mn>
        </mtd>
        <mtd>
          <mn>5</mn>
        </mtd>
      </mtr>
    </mtable>
  </mfenced>
  <mo>=</mo>
  <mfenced>
    <mtable>
      <mtr>
        <mtd>
          <mn>2</mn>
        </mtd>
        <mtd>
          <mn>12</mn>
        </mtd>
      </mtr>
      <mtr>
        <mtd>
          <mn>-6</mn>
        </mtd>
        <mtd>
          <mn>14</mn>
        </mtd>
      </mtr>
    </mtable>
  </mfenced>
</math>

総和(数列の和)
( Summation )

ギリシャ文字の Σ(シグマ) [ 総和 (Summation) の頭文字Sに相当する文字 ]を表すには &sum; を利用します。

i = 1 n k i
<math>
  <munderover>
    <mi>&sum;</mi>
    <mrow>
      <mi>i</mi>
      <mo>=</mo>
      <mn>1</mn>
    </mrow>
    <mi>n</mi>
  </munderover>
  <msub>
    <mi>k</mi>
    <mi>i</mi>
  </msub>
</math>

総乗(数列の積)
( Infinite product )

ギリシャ文字の Π(パイ) [ 積 (Product) の頭文字Pに相当する文字 ]を表すには &prod; を利用します。

i = 1 n k i
<math>
  <munderover>
    <mi>&prod;</mi>
    <mrow>
      <mi>i</mi>
      <mo>=</mo>
      <mn>1</mn>
    </mrow>
    <mi>n</mi>
  </munderover>
  <msub>
    <mi>k</mi>
    <mi>i</mi>
  </msub>
</math>

極限
( Limit )

lim n 1 n = 0
<math>
  <munder>
    <mi>lim</mi>
    <mrow>
      <mi>n</mi>
      <mo>&#x2192;</mo>
      <mi>&infin;</mi>
    </mrow>
  </munder>
  <mfrac>
    <mn>1</mn>
    <mi>n</mi>
  </mfrac>
  <mo>=</mo>
  <mn>0</mn>
</math>

微分
( Differential )

d d x x 3 = 3 x 2
<math>
  <mfrac>
    <mrow>
      <mi>d</mi>
    </mrow>
    <mrow>
      <mi>d</mi>
      <mi>x</mi>
    </mrow>
  </mfrac>
  <msup>
    <mi>x</mi>
    <mn>3</mn>
  </msup>
  <mo>=</mo>
  <mn>3</mn>
  <msup>
    <mi>x</mi>
    <mn>2</mn>
  </msup>
</math>

偏微分
( Partial differential )

f x, y = x 2 + y 2 + x y のとき、x に関する偏微分は以下のようになります。
f x, y x = 2 x + y
<math>
  <mfrac>
    <mrow>
      <mo>&part;</mo>
      <mi>f</mi>
      <mo>&ApplyFunction;</mo>
      <mfenced>
        <mrow>
          <mi>x, y</mi>
        </mrow>
      </mfenced>
    </mrow>
    <mrow>
      <mo>&part;</mo>
      <mi>x</mi>
    </mrow>
  </mfrac>
  <mo>=</mo>
  <mn>2</mn>
  <mi>x</mi>
  <mo>+</mo>
  <mi>y</mi>
</math>

合成関数の微分
( Composite function )

d y d x = d y d u × d u d x
<math>
  <mfrac>
    <mrow>
      <mo>d</mo>
      <mi>y</mi>
    </mrow>
    <mrow>
      <mo>d</mo>
      <mi>x</mi>
    </mrow>
  </mfrac>
  <mo>=</mo>
  <mfrac>
    <mrow>
      <mo>d</mo>
      <mi>y</mi>
    </mrow>
    <mrow>
      <mo>d</mo>
      <mi>u</mi>
    </mrow>
  </mfrac>
  <mo>&times;</mo>
  <mfrac>
    <mrow>
      <mo>d</mo>
      <mi>u</mi>
    </mrow>
    <mrow>
      <mo>d</mo>
      <mi>x</mi>
    </mrow>
  </mfrac>
</math>

e.g.

y = 3x - 1 8 のとき、 u = 3x - 1 として、 d y d x = 8 u 7 × 3 = 24 3x - 1 7 と求めることができます。

積分
( Integral )

不定積分

f x d x
<math>
  <msubsup>
    <mo>&int;</mo>
  </msubsup>
  <mi>f</mi>
  <mo>&ApplyFunction;</mo>
  <mfenced>
    <mrow>
      <mi>x</mi>
    </mrow>
  </mfenced>
  <mi>d</mi>
  <mi>x</mi>
</math>

定積分

a b f x d x
<math>
  <msubsup>
    <mo>&int;</mo>
    <mn>a</mn>
    <mi>b</mi>
  </msubsup>
  <mi>f</mi>
  <mo>&ApplyFunction;</mo>
  <mfenced>
    <mrow>
      <mi>x</mi>
    </mrow>
  </mfenced>
  <mi>d</mi>
  <mi>x</mi>
</math>

おまけ

ギリシャ文字なども、数式を書く上で必要です。

ギリシャ文字

大文字 小文字 name 名前 HTML
Α α alpha アルファ &Alpha; &alpha;
Β β beta ベータ &Beta; &beta;
Γ γ gamma ガンマ &Gamma; &gamma;
Δ δ delta デルタ &Delta; &delta;
Ε ε epsilon イプシロン &Epsilon; &epsilon;
Ζ ζ zeta ゼータ &Zeta; &zeta;
Η η eta イータ &Eta; &eta;
Θ θ theta シータ &Theta; &theta;
Ι ι iota イオタ &Iota; &iota;
Κ κ kappa カッパ &Kappa; &kappa;
Λ λ lambda ラムダ &Lambda; &lambda;
Μ μ mu ミュー &Mu; &mu;
Ν ν nu ニュー &Nu; &nu;
Ξ ξ xi クサイ &Xi; &xi;
Ο ο omicron オミクロン &Omicron; &omicron;
Π π pi パイ &Pi; &pi;
Ρ ρ rho ロー &Rho; &rho;
Σ σ sigma シグマ &Sigma; &sigma; &sigmaf;
Τ τ tau タウ &Tau; &tau;
Υ υ upsilon ユプシロン &Upsilon; &upsilon;
Φ φ phi ファイ &Phi; &phi;
Χ χ chi カイ &Chi; &chi;
Ψ ψ psi プサイ &Psi; &psi;
Ω ω omega オメガ &Omega; &omega;

主な記号

演算子 HTML description 説明
&ExponentialE; Natural number ネイピア数、自然対数の底
&ImaginaryI; Imaginary i 虚数
&infin; Infinity 無限

主な演算子

演算子 HTML description 説明
&ge; Greater than or equal to 以上
> &gt; Greater than より大きい
&le; Less than or equal to 以下
< &lt; Less than より小さい
&ne; Not equal to 等しくない
± &pm; Plus or minus
&#x2208; element of 属する
&#x2209; not an element of 属さない
&#x2282; subset of 部分集合
&#x2284; not a subset of
&#x2229; intersection 集合積
&#x222A; union 集合和

https://www.w3.org/TR/MathML3/appendixc.html