数式をWeb上で表示するためのマークアップ言語である「MathML」の使い方について紹介します。「MathML」は未対応のブラウザが多いので、「MathJax」というライブラリが必要です。
MathMLとは?
MathML(Mathematical Markup Language)
は、HTMLタグを使用して数式をマークアップする手段を提供します。
- https://www.w3.org/Math/
- https://www.w3.org/TR/MathML3/
- https://developer.mozilla.org/ja/docs/Web/MathML
ただし、 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 )
<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>&times;</mo>
<mn>3</mn>
<mo>&divide;</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>&ApplyFunction;</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>&theta;</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mi>sin</mi>
<mi>&theta;</mi>
</mrow>
<mrow>
<mi>cos</mi>
<mi>&theta;</mi>
</mrow>
</mfrac>
</math>
ベクトル
( Vektor )
<math>
<mover>
<mi>v</mi>
<mo>&RightArrow;</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>&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;
を利用します。
<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 )
<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 )
<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>&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 )
<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.
のとき、 として、 と求めることができます。 積分
( Integral )
不定積分
<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>
定積分
<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 | 集合和 |