<math>

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2023年1月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

<math> は最上位の MathML 要素で、1 つの数式を記述するのに使われます。これはフローコンテンツが許可されている HTML コンテンツに置くことができます。

メモ: MathML の数式をウェブページに適切に統合するためのヒントについては MathML の作成ページを、その他のデモについては例ページを参照してください。

属性

この要素の属性には、グローバル MathML 属性の他に以下の属性があります。

display

この列挙属性は、囲んでいる MathML マークアップをレンダリングする方法を指定します。これは、次のいずれかの値を取ることができます。

block は、この要素が現在のテキストのスパンの外にある独自のブロックに表示され、math-style が normal に設定されていることを意味します。
inline は、この要素が現在のテキストのスパンの中に表示され、 math-style が compact に設定されていることを意味します。

存在しない場合、デフォルト値は inline です。

アクセシビリティ

<math> 要素には、暗黙的な ARIA math ロールが付与されています。支援技術はこのロールを使用し、そのコンテンツを数式として識別し、ユーザーに伝えることができます。

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  font-size: 1.5rem;
}

例えば、スクリーンリーダーは、下記の二次方程式の解の公式を次のように表します。

x イコール分数開始、マイナス 2 プラスマイナスルート b 自乗マイナス 4 a c ルート終わり、分母は 2 a、分数と数式終わり

二次方程式の解の公式のマークアップ

html

<math display="block">
  <mrow>
    <mi>x</mi>
    <mo>=</mo>
    <mfrac>
      <mrow>
        <mrow>
          <mo>−</mo>
          <mi>b</mi>
        </mrow>
        <mo>±</mo>
        <msqrt>
          <mrow>
            <msup>
              <mi>b</mi>
              <mn>2</mn>
            </msup>
            <mo>−</mo>
            <mrow>
              <mn>4</mn>
              <mo>⁢</mo>
              <mi>a</mi>
              <mo>⁢</mo>
              <mi>c</mi>
            </mrow>
          </mrow>
        </msqrt>
      </mrow>
      <mrow>
        <mn>2</mn>
        <mo>⁢</mo>
        <mi>a</mi>
      </mrow>
    </mfrac>
  </mrow>
</math>

例

この例には 2 つの MathML 式が含まれています。最初のものは、必要なだけの空間をとって、中央のブロック内に表示されます。 2 番目のものは、高さを最小にするためにサイズと間隔を狭めて、テキストの段落の中に表示されます。

html

<p>
  無限の加算
  <math display="block">
    <mrow>
      <munderover>
        <mo>∑</mo>
        <mrow>
          <mi>n</mi>
          <mo>=</mo>
          <mn>1</mn>
        </mrow>
        <mrow>
          <mo>+</mo>
          <mn>∞</mn>
        </mrow>
      </munderover>
      <mfrac>
        <mn>1</mn>
        <msup>
          <mi>n</mi>
          <mn>2</mn>
        </msup>
      </mfrac>
    </mrow>
  </math>
  は実数
  <math display="inline">
    <mfrac>
      <msup>
        <mi>π</mi>
        <mn>2</mn>
      </msup>
      <mn>6</mn>
    </mfrac>
  </math>
  と等しい。
</p>