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

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

目次

MathMLとは?

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

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

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

数式を表示する他の方法

LaTeXASCIIMathMLといった方法もあります。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 )

<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 )

<math>
  <mn>5</mn>
  <mo>×</mo>
  <mn>3</mn>
  <mo>÷</mo>
  <mn>2</mn>
</math>

分数
( Fraction )

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

絶対値
( Absolute value )

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

連立方程式
( Simultaneous equations )

<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 )

<math>
  <mi>f</mi>
  <mo>⁡</mo>
  <mfenced>
    <mrow>
      <mi>x</mi>
    </mrow>
  </mfenced>
</math>

累乗
( Power )

<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 )

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

平方根
( Square root )

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

三角関数
( Trigonometric function )

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

ベクトル
( Vektor )

<math>
  <mover>
    <mi>v</mi>
    <mo>→</mo>
  </mover>
</math>

行列
( Matrix )

<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; を利用します。

<math>
  <munderover>
    <mi>∑</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; を利用します。

<math>
  <munderover>
    <mi>∏</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 )

<math>
  <munder>
    <mi>lim</mi>
    <mrow>
      <mi>n</mi>
      <mo>→</mo>
      <mi>∞</mi>
    </mrow>
  </munder>
  <mfrac>
    <mn>1</mn>
    <mi>n</mi>
  </mfrac>
  <mo>=</mo>
  <mn>0</mn>
</math>

微分
( Differential )

<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 )

<math>
  <mfrac>
    <mrow>
      <mo>∂</mo>
      <mi>f</mi>
      <mo>⁡</mo>
      <mfenced>
        <mrow>
          <mi>x, y</mi>
        </mrow>
      </mfenced>
    </mrow>
    <mrow>
      <mo>∂</mo>
      <mi>x</mi>
    </mrow>
  </mfrac>
  <mo>=</mo>
  <mn>2</mn>
  <mi>x</mi>
  <mo>+</mo>
  <mi>y</mi>
</math>

合成関数の微分
( Composite function )

<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>×</mo>
  <mfrac>
    <mrow>
      <mo>d</mo>
      <mi>u</mi>
    </mrow>
    <mrow>
      <mo>d</mo>
      <mi>x</mi>
    </mrow>
  </mfrac>
</math>

e.g.

積分
( Integral )

不定積分

<math>
  <msubsup>
    <mo>∫</mo>
  </msubsup>
  <mi>f</mi>
  <mo>⁡</mo>
  <mfenced>
    <mrow>
      <mi>x</mi>
    </mrow>
  </mfenced>
  <mi>d</mi>
  <mi>x</mi>
</math>

定積分

<math>
  <msubsup>
    <mo>∫</mo>
    <mn>a</mn>
    <mi>b</mi>
  </msubsup>
  <mi>f</mi>
  <mo>⁡</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;

主な記号

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

主な演算子

演算子HTMLdescription説明
&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

よかったらシェアしてね!
目次