Webページ上で数式的数学表現をマークアップする

2025年11月17日　Posted　野々瀨(フロントエンドエンジニア)

Webページで数式（数学）的表現をする場合、一昔前は画像で表現したり、CSSのpositionプロパティで絶対配置したりして表現していました。しかし、MathMLの登場により、タグで数式（数学）的表現をすることができるようになりました。ここではそんなMathMLを軽くご紹介しようと思います。

MathMLとは

MathMLはMathematical Markup Languageの略称で、数式（数学）的表現を行うためのマークアップ言語です。MathML自体は以前からありましたが、当時表現できるブラウザーはかなり限定されていたり、プラグインを用いないと表現することができませんでした。

対応ブラウザー／デバイス

近年の主要ブラウザー／デバイスは全て対応しています。

https://caniuse.com/mathml

ただしブラウザーによっては全てのタグや属性などに対応しているわけではありませんので、一部は正しく表示されない可能性があるため、ご注意ください。

書き方

最低限必要なタグ

MathMLでは最低限mathタグを記述します。数式はこのタグの中で記述を行います。

<math>
  ここに数式を記述
</math>

mathタグは通常インライン要素となっています。display属性を付与することで、インライン要素かブロック要素かを制御することができます。

<math display="block">
  ...
</math>

ただし、ブロック要素にすると式全体が水平方向に中央揃えとなってしまいます。CSSのtext-alignプロパティでは制御することはできず、CSSでwidth:fit-contentと指定や、display属性を指定する代わりにdiv要素で囲うなどで対応することができます。

参考：https://developer.mozilla.org/ja/docs/Web/MathML/Reference/Element/math

識別子

識別子は変数、記号定数、関数名といったものを表し、miタグで記述します。

変数は
<math>
  <mi>x</mi>
</math>、
関数名は
<math>
  <mi>sin</mi>
</math>といった感じ

単位などもmiタグで記述しますが、表示がイタリック体で表示される場合があります。そういう時はmathvariant属性を付与し、normalを指定することで通常の書体で表示されます。

<math>
  <mi mathvariant="normal">cm</mi>
</math>

参考：https://developer.mozilla.org/ja/docs/Web/MathML/Reference/Element/mi

数字

数字として表す場合はmnタグで記述します。整数や少数、コンマを含む数字を指定することができます。

<math display="block">
  <mn>123</mn>
</math>

<math display="block">
  <mn>1.23</mn>
</math>

<math display="block">
  <mn>1,234</mn>
</math>

参考：https://developer.mozilla.org/ja/docs/Web/MathML/Reference/Element/mn

演算子／記号

演算子として表す場合はmoタグで記述します。moタグは+や-といったものから、(や<といった記号を含む文字を扱うことができます。

<math>
  <mn>1</mn>
  <mo>+</mo>
  <mn>2</mn>
  <mo>-</mo>
  <mo>(</mo>
  <mn>3</mn>
  <mo>&times;</mo>
  <mn>4</mn>
  <mo>)</mo>
  <mo>=</mo>
  <mn>-9</mn>
</math>

また、例えば2xといった記号が省略された乗法（乗算）のように、不可視な演算子や記号が存在します。不可視な演算子や記号は主に次の三つあり、それぞれの文字実体参照で記述することができます。

名称文字実体参照文字実体参照（省略）
乗法（乗算） &InvisibleTimes; &it;
関数適用 &ApplyFunction; &af;
コンマ &InvisibleComma; &ic; 
<math>
  <mn>2</mn>
  <mo>&InvisibleTimes;</mo>
  <mi>x</mi>
</math>

stretchy属性を指定することで、隣接する要素に合わせて引き伸ばすかどうかを指定することができます。指定可能なのはtrueまたはfalseで、初期はtrueが与えられています。

<math>
  <mo stretchy="false">(</mo>
  <mn>2</mn>
  <mo>+</mo>
  <mi>x</mi>
  <mo stretchy="false">)</mo>
  <mfrac>
    <mn>1</mn>
    <mn>3</mn>
  </mfrac>
</math>

参考：https://developer.mozilla.org/ja/docs/Web/MathML/Reference/Element/mo

分数

分数を扱う場合は、mfracタグで記述します。

<math display="block">
  <mfrac>
    <mn>1</mn>
    <mn>3</mn>
  </mfrac>
</math>

mfracタグは入れ子にすることもできます。

<math display="block">
  <mfrac>
    <mfrac>
      <mn>1</mn>
      <mn>3</mn>
    </mfrac>
    <mfrac>
      <mn>2</mn>
      <mn>4</mn>
    </mfrac>
  </mfrac>
</math>

参考：https://developer.mozilla.org/ja/docs/Web/MathML/Reference/Element/mfrac

平方根

平方根を扱う場合は、msqrtタグで記述します。

<math display="block">
  <msqrt>
    <mn>2</mn>
  </msqrt>
</math>

<math display="block">
  <msqrt>
    <mi>x</mi>
    <mo>+</mo>
    <mn>2</mn>
  </msqrt>
</math>

参考：https://developer.mozilla.org/ja/docs/Web/MathML/Reference/Element/msqrt

累乗根

平方根を扱う場合は、mrootタグで記述します。

<math>
  <mroot>
    <mi>x</mi>
    <mn>3</mn>
  </mroot>
</math>

参考：https://developer.mozilla.org/ja/docs/Web/MathML/Reference/Element/mroot

グループ化

数式をまとめる場合は、mrowタグで記述します。

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

参考：https://developer.mozilla.org/en-US/docs/Web/MathML/Reference/Element/mrow

上付き文字／累乗

上付き文字を扱う場合は、msupタグで記述します。二つ目の子要素が上付き文字として扱われます。

<math>
  <msup>
    <mi>x</mi>
    <mn>2</mn>
  </msup>
</math>

参考：https://developer.mozilla.org/ja/docs/Web/MathML/Reference/Element/msup

下付き文字／添え字

上付き文字を扱う場合は、msubタグで記述します。二つ目の子要素が下付き文字として扱われます。

<math>
  <msub>
    <mi>x</mi>
    <mn>2</mn>
  </msub>
</math>

参考：https://developer.mozilla.org/ja/docs/Web/MathML/Reference/Element/msub

上下付き文字

上付き文字と下付き文字の両方を扱う場合は、msubsupタグで記述します。二つ目の子要素が下付き文字、三つ目の子要素が上付き文字として扱われます。

<math>
  <msubsup>
    <mo>&int;</mo>
    <mn>0</mn>
    <mn>1</mn>
  </msubsup>
  <mrow>
    <mi>f</mi>
    <mo>&ApplyFunction;</mo>
    <mo>(</mo>
    <mi>x</mi>
    <mo>)</mo>
    <mi>d</mi>
    <mi>x</mi>
  </mrow>
</math>

参考：https://developer.mozilla.org/ja/docs/Web/MathML/Reference/Element/msubsup

文字列

文字列として扱う場合は、msタグで記述します。プログラミング言語や数式処理を行うシステムなどで解釈されるために用います。

<math>
  <ms>String</ms>
</math>

参考：https://developer.mozilla.org/en-US/docs/Web/MathML/Reference/Element/ms

テキスト

テキストとして扱う場合は、mtextタグで記述します。

<math>
  <mtext>Text</mtext>
</math>

参考：https://developer.mozilla.org/ja/docs/Web/MathML/Reference/Element/mtext

余白

余白を扱う場合は、mspaceタグで記述します。mspaceタグはwidth属性やheight属性などを指定して表現します。

<math>
  <mi>x</mi>
  <mo>+</mo>
  <mi>1</mi>
  <mspace width="1em" />
  <mi>y</mi>
  <mo>-</mo>
  <mi>2</mi>
</math>

参考：https://developer.mozilla.org/ja/docs/Web/MathML/Reference/Element/mtext

表組み／行列

表組みや行列を扱う場合は、mtableタグ、mtrタグ、mtdタグで記述します。mtableタグで表組みや行列であるということを表し、mtrタグで列、mtdタグで一つのセルを表します。

<math>
  <mrow>
    <mo>(</mo>
    <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>
    <mo>)</mo>
  </mrow>
</math>

エラー

エラーとして扱う場合は、merrorタグで記述します。

<math>
  <merror>
    <mo stretchy="false">(</mo>
    <mi>x</mi>
    <mo>+</mo>
    <mi>y</mi>
    <mo stretchy="false">)</mo>
    <mfrac>
      <mn>1</mn>
      <mn>3</mn>
    </mfrac>
  </merror>
</math>

参考：https://developer.mozilla.org/ja/docs/Web/MathML/Reference/Element/merror

最後に

MathMLについて、一部ではありますがご紹介してきました。これ以外にも幾つかのタグや属性を用いて、数式（数学）的表現をすることができます。また、まだ実装されていないものもあるので、今後さらに柔軟に高度に数式（数学）的表現が行えることでしょう。