はじめに
Webページに数式を載せたいと思ったことはありませんか？
数式は、普通にHTMLで書くだけではうまく表現できません。
分数やルート、シグマ記号などをきれいに表示するには、専用の仕組みが必要です。
この記事では、HTMLで数式を美しく表示できるツールとして、MathJaxを紹介します。
無料で使える素晴らしいツールです。
特徴（こんなメリットがあります）
- 数式を LaTeX（ラテフ）形式で書ける
- かなり複雑な式まできれいに表示できる
- インターネットがあればすぐ使える
LaTeXは、数学や物理などで使われる高品質な文書作成システム。
分数・ルート・積分記号なども、専用のコマンドで美しく記述できる。
使い方①：CDNの読み込み
まずは、HTMLファイルの <head> タグや <body> の最初のほうに、以下の1行を追加します。
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
これで準備OKです！
使い方②：数式を書いてみよう
数式は次のように書きます(LaTeX形式)：
- インラインで表示する →
\( E = mc^2 \) - 改行して大きく表示する →
\[ 数式 \]
<p>インライン表示：\( E = mc^2 \)</p>
<p>ディスプレイ表示：</p>
\[
\int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
\]
<!-- intは積分記号,fracは分数,sqrtはルート,piはパイ -->
Webページを開くと、これがちゃんと数式として表示されます。
こんなかんじ↓
See the Pen 数式表示1 by ken1math (@8787kazuye) on CodePen.
番外編：数式を画像にする方法
数式を画像（PNGやSVG）にして貼り付ける方法もあります。
ただし以下のようなデメリットがあるので、あまりおすすめはしません。
- 拡大するとぼやける
- ダークモードだと背景が目立つ
- コピーして使えない（文字ではないため）
おわりに
HTMLだけで数式をきれいに書くのは大変ですが、
MathJaxを使えば、LaTeX形式のまま簡単に表示できます。
数学系の記事や、教育用のコンテンツ、技術ブログなどにとても便利です。
もし「数式をWebに載せたいな」と思ったら、ぜひ今回紹介した方法を試してみてください！