2026年8月26日水曜日

数学記号

対話ログ保存 - 数学記号Web表示

ユーザー

数学記号の WEb表示のテンプレート ある?

AI

Webサイト上で数学記号や数式をきれいに表示するためのHTMLテンプレートを用意しました。

現在、Webで数式を表示する方法としては、MathJax(マスジャックス) または KaTeX(カテックス) というライブラリを使用するのが一般的です。

1. MathJax(標準的で多機能)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>MathJax 数式表示テンプレート</title>
    <script>
        window.MathJax = {
            tex: {
                inlineMath: [['$', '$'], ['\\(', '\\)']],
                displayMath: [['$$', '$$'], ['\\[', '\\]']]
            }
        };
    </script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</head>
<body>
    <p>2次方程式の一般形は $ax^2 + bx + c = 0$ と表されます。</p>
    <p>解の公式は $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$ です。</p>
    <p>$$E = mc^2$$</p>
</body>
</html>

2. KaTeX(表示速度を重視する場合)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>KaTeX 数式表示テンプレート</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css">
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/contrib/auto-render.min.js"
        onload="renderMathInElement(document.body, {
            delimiters: [
                {left: '$$', right: '$$', display: true},
                {left: '$', right: '$', display: false}
            ]
        });"></script>
</head>
<body>
    <p>オイラーの等式は $e^{i\pi} + 1 = 0$ です。</p>
    <p>$$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$</p>
</body>
</html>