mathタグ -数式を記述する｜HTML辞典
<math>タグとは？
<math> タグは、HTML 内で数式を記述するためのタグであり、MathML（Mathematical Markup Language）を使用して数学表記をレンダリングできます。
ブラウザが MathML に対応していれば、ネイティブな数学表記が可能になります。
基本情報
コンテンツモデル
MathML コンテンツ（MathML Content）。
閉じタグの有無
<math> は 開始タグ（<math>）と閉じタグ（</math>）の両方が必要 です。
基本的な記述方法
<math>
<mfrac>
<mi>a</mi>
<mi>b</mi>
</mfrac>
</math>
✅ 上記のコードでは、a/b の分数表記が表示されます。
使用できる主な MathML 要素
| タグ | 説明 | 例 |
|---|---|---|
<mi> | 変数や識別子（例：x, y） | <mi>x</mi> |
<mn> | 数値（例：1, 2, 3） | <mn>2</mn> |
<mo> | 演算子（例：+, -, ×, ÷） | <mo>+</mo> |
<mfrac> | 分数 | <mfrac><mi>a</mi><mi>b</mi></mfrac> |
<msup> | 上付き文字 | <msup><mi>x</mi><mn>2</mn></msup> |
<msub> | 下付き文字 | <msub><mi>a</mi><mn>1</mn></msub> |
<msqrt> | ルート（平方根） | <msqrt><mn>4</mn></msqrt> |
<mrow> | 数式のグループ化 | <mrow><mi>a</mi><mo>+</mo><mi>b</mi></mrow> |
CSSを使ったデザイン変更
<math> タグのデフォルトデザインはブラウザ依存ですが、CSS で調整できます。
math {
font-size: 1.2em;
}
mfrac {
line-height: 1.5;
}
✅ このスタイルを適用すると、数式のフォントサイズが大きくなり、可読性が向上します。
適切な使用例
✅ 分数を表示する
<math>
<mfrac>
<mi>a</mi>
<mi>b</mi>
</mfrac>
</math>
✅ a/b の形式で表示されます。
✅ 上付き・下付き文字を使用する（指数表記）
<math>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
</math>
✅ x² のように表示されます。
✅ ルートを表記する
<math>
<msqrt>
<mn>16</mn>
</msqrt>
</math>
✅ √16 の形式で表示されます。
適切でない使用例（誤った使い方）
❌ <math> の中に直接テキストを記述する
<!-- NG: 変数や数値をタグなしで書く -->
<math>
a + b = c
</math>
✅ 正しい書き方（適切な MathML タグを使用）
<math>
<mrow>
<mi>a</mi>
<mo>+</mo>
<mi>b</mi>
<mo>=</mo>
<mi>c</mi>
</mrow>
</math>
❌ <math> を HTML の通常の数式表記の代わりに使用する
<!-- NG: MathML をサポートしていない環境では正しく表示されない -->
<p>2 × 2 = <math><mn>4</mn></math></p>
✅ 通常の HTML で表現するか、MathML 対応を確認
<p>2 × 2 = 4</p>
<math>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<math> | 数式を記述 | MathML をサポート | 科学・数学の表記 |
<sup> | 上付き文字 | シンプルな指数表記 | x² などの簡単な数式 |
<sub> | 下付き文字 | 化学式や添字表記 | H₂O などの化学式 |
<code> | コードの記述 | 数学的なコード表記 | プログラム内の数式 |
使用上の注意点
✅ <math> は MathML に対応したブラウザでのみ適切にレンダリングされる
- 最新のブラウザでは多くが対応しているが、一部環境では正しく表示されない可能性がある。
✅ <math> の代替として LaTeX（KaTeX や MathJax）を使う選択肢もある
- MathML が適用できない環境では、LaTeX ベースのレンダリングが有効な場合もある。
✅ <math> を使わなくても、シンプルな数式なら <sup> や <sub> で代用できる
- 例えば
x²は<sup>を使うことで<math>なしでも表現可能。
関連タグ
まとめ
<math> タグは、HTML の MathML を使用して数学表記を記述するためのタグ です。
数学や科学の表記を正確に表現できますが、対応ブラウザを考慮する必要があります。
