MENU
  1. ホーム
  2. 07. HTML/CSS
  3. 7-04 MathJaxでWEB上で数式を表示する

7-04 MathJaxでWEB上で数式を表示する

07. HTML/CSS

今回の授業のめあて

学習目標：MathJaxを使ってWebページで美しい数式を表示できるようになる 所要時間：50分 ファイル構成：既存のweb_lesson/フォルダに新しいファイルを追加

1. ファイル構造の確認

今回作成するファイル

web_lesson/
├── 練習用ファイル群
│   ├── lesson3.html + style.css（既存）
│   ├── colors.html + colors.css（既存）
│   ├── fonts.html + fonts.css（既存）
│   ├── layout.html + layout.css（既存）
│   └── math.html（←今回新規作成）
└── 実用サイト群
    ├── index.html + main-style.css（既存）
    ├── lesson1.html（既存）
    ├── lesson2.html（既存）
    └── lesson4.html（←今回新規作成）

今回の作業

  1. 練習用ファイル：math.html を新たに作成し、MathJaxの基本を学習する。
  2. 実用サイト：lesson4.html を新たに作成し、数式を使った実用的なページを作成
  3. 最後にindex.htmlにlesson4へのリンクを追加
  4. GitHubでWEBを公開

2. MathJaxとは？

MathJaxの概要

MathJaxは、Webページで数学の数式を美しく表示するためのJavaScriptライブラリです。これまで学習してきたHTMLとCSSに加えて、数学的な表現を豊かにすることができます。

HTMLの<head> </head>の間に次のようなコマンドを書き足します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.min.js"></script>
<script>
MathJax = {
    tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']],
        displayMath: [['$$', '$$'], ['\\[', '\\]']]
    }
};
</script>

MathJaxの特徴

  • 複雑な数式も簡単に表示可能
  • LaTeX記法が使える（数学界で広く使われている記法）
  • レスポンシブデザインに対応
  • 無料で利用可能
  • これまで作成したCSSデザインと組み合わせ可能

実際の表示例

  • アインシュタインの相対性理論： $E=mc^2$
  • ピタゴラスの定理： $a^2+b^2=c^2$
  • 二次方程式の解の公式：$x=\frac{-b\pm \sqrt{b^2-4ac}}{2a}$

3. 練習用ファイルの作成

math.htmlの作成

以下の内容でmath.htmlファイルを新規作成してください：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>MathJax練習 - 数式表示</title>
    
    <!-- MathJaxの読み込み -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.min.js"></script>
    <script>
        MathJax = {
            tex: {
                inlineMath: [['$', '$'], ['\\(', '\\)']],
                displayMath: [['$$', '$$'], ['\\[', '\\]']]
            }
        };
    </script>
</head>
<body>
    <h1>MathJax練習ページ</h1>
    <p>数式表示の基本を学ぼう</p>
    
    <h2>簡単な数式を表示してみよう</h2>
    <p>文章の中に $x = 5$ のような数式を入れることができます。</p>
    
    <p>独立した数式は以下のように表示されます：</p>
    $$E = mc^2$$
    
    <p>上の数式は、MathJaxで美しく表示されています。</p>
</body>
</html>

MathJaxの設定説明

  • inlineMath：文章中に埋め込む数式の記法 $...$
  • displayMath：独立して表示する数式の記法 $$...$$
  • CDNから最新版のMathJaxを読み込み

動作確認手順

  1. ファイルを保存
  2. ブラウザで開く
  3. 数式が正しく表示されることを確認

4. 基本的な数式の記法

インライン数式とディスプレイ数式

インライン数式（文章中の数式）

<p>二次方程式 $ax^2 + bx + c = 0$ の解は...</p>

ディスプレイ数式（独立した数式）

$$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$

基本的な記号の書き方

上付き文字・下付き文字

  • x^2 → $x^2$
  • a_1 → $a_1$
  • x^{n+1} → $x^{n+1}$

分数

  • \frac{1}{2} → $ \frac 1 2 $（美しい分数表示）
  • \frac{x+1}{x-1} → $\frac{x+1}{x-1}$複雑な分数も可能

平方根

  • \sqrt{2} → $\sqrt 2$
  • \sqrt{x+y} → $\sqrt{x+y}$

ギリシャ文字

  • \alpha → $\alpha$
  • \beta → $\beta$
  • \pi → $\pi$
  • \theta → $\theta$

5. 実用サイトの作成

lesson4.htmlの作成

実用サイト群に数学公式集ページを作成：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>数学公式集 - 第4回授業</title>
    
    <!-- MathJaxの読み込み -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.min.js"></script>
    <script>
        MathJax = {
            tex: {
                inlineMath: [['$', '$'], ['\\(', '\\)']],
                displayMath: [['$$', '$$'], ['\\[', '\\]']]
            }
        };
    </script>
</head>
<body>
    <h1>高校数学 公式集</h1>
    
    <h2>基本公式</h2>
    <h3>ピタゴラスの定理</h3>
    <p>直角三角形において、斜辺の二乗は他の二辺の二乗の和に等しい。</p>
    $$a^2 + b^2 = c^2$$
    
    <h3>二次方程式の解の公式</h3>
    <p>$ax^2 + bx + c = 0$ の解は：</p>
    $$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$
    
    <h2>三角関数</h2>
    <h3>基本関係式</h3>
    $$\sin^2 \theta + \cos^2 \theta = 1$$
    
    <h3>タンジェントの定義</h3>
    $$\tan \theta = \frac{\sin \theta}{\cos \theta}$$
    
    <h2>図形の公式</h2>
    <h3>円の面積と円周</h3>
    <p>半径 $r$ の円について：</p>
    <p>面積：$S = \pi r^2$</p>
    <p>円周：$C = 2\pi r$</p>
    
    <h3>球の体積と表面積</h3>
    <p>半径 $r$ の球について：</p>
    <p>体積：$V = \frac{4}{3}\pi r^3$</p>
    <p>表面積：$S = 4\pi r^2$</p>
    
    <footer>
        <p><a href="index.html">トップページに戻る</a></p>
    </footer>
</body>
</html>

6. 演習課題（5分）

課題1：基本的な数式

以下の数式をMathJaxで表示してみましょう：

  1. 二次関数：y = ax² + bx + c
    • 答え：$$y = ax^2 + bx + c$$
  2. 円の面積：S = πr²
    • 答え：$$S = \pi r^2$$
  3. 速度の公式：v = v₀ + at
    • 答え：$$v = v_0 + at$$

課題2：やや複雑な数式

  1. 三角関数の加法定理
    • 答え：$$\sin(A + B) = \sin A \cos B + \cos A \sin B$$
  2. 対数の性質
    • 答え：$$\log(xy) = \log x + \log y$$

7. index.htmlの更新

ナビゲーションにlesson4を追加

既存のindex.htmlのナビゲーション部分を更新：

<nav>
    <ul>
        <li><a href="lesson1.html">第1回：HTMLの基礎</a></li>
        <li><a href="lesson2.html">第2回：CSSでデザイン</a></li>
        <li><a href="lesson3.html">第3回：レイアウトと配色</a></li>
        <li><a href="lesson4.html">第4回：数式表示</a></li>
    </ul>
</nav>

8. GitHub Pagesでの公開と確認

公開手順

  1. 作成したファイルをすべてGitHubリポジトリにアップロード
  2. GitHub Pagesの設定を確認
  3. 数式が正しく表示されることを確認

確認ポイント

  • MathJaxが正しく読み込まれているか
  • 数式の表示が崩れていないか
  • ナビゲーションが正しく動作するか

9. まとめと次回予告

今回学んだこと

  • MathJaxの導入と基本的な使い方
  • LaTeX記法による数式の表現
  • 既存のHTMLファイル構成への新機能追加
  • インライン数式とディスプレイ数式の使い分け

ファイル管理のポイント

  • 練習用と実用版の使い分け
  • 段階的なファイル構成の構築
  • 既存サイトへの機能追加方法

10. トラブルシューティング

トラブル解決

数式が表示されない場合

  1. MathJaxのスクリプトタグが正しく配置されているか確認
  2. $や$$の対応関係を確認
  3. ブラウザのデベロッパーツールでエラーをチェック

表記法で困った場合

  1. 複数文字の上付き・下付きは{}で囲む
  2. 特殊文字は\でエスケープ
  3. 分からない記号はMathJax公式ドキュメントを参照

発展学習

  • 化学式の表示（mhchem拡張）
  • 図形描画との組み合わせ
  • インタラクティブな数式計算機の作成
07. HTML/CSS

コメント

コメントする