Webページに数式を表示する方法を徹底解説 – 導入編 –

方程式、分数、平方根(ルート)、累乗(2乗、3乗)、数列、微分・積分、行列といった数式をWebページで表示するにはどうすれば良いでしょうか? 複雑な数式をWebページで表示する方法を徹底解説します。

下に「二次方程式の解の公式」が表示されているかと思いますが、画像でも特殊技術でもなく、WEB標準に準拠して表示しています。

x = b ± b 2 4 a c 2 ⁢ a

 
これから紹介する方法をマスターすれば、このようにWeb標準に準拠し、複雑な数式をWebページに表示することができるようになります。

 

数式を表示するための基礎知識

数式をWebページで表現するには MathML (Mathematical Markup Language)というマークアップ言語を使います。MathML は <math> タグにより HTML の中に直接記述することが可能です。

MathML の注意事項

2018年1月時点で MathML に対応しているブラウザは Firefox  /  Safari  /  iOS Safari のみとなっています。Chrome  /  Chrome for Android  /  Internet Explorer  /  Microsoft Edge といった主要ブラウザは MathML で記述された数式を表示できません。

主要ブラウザのサポート状況については下記ページで確認できますが、主要ブラウザの対応が完了するにはまだまだ時間が掛かりそうです。
https://caniuse.com/#search=math

MathML を補完する MathJax

2018年の時点で数式を表示するための最良の手段は MathJax という JavaScript ライブラリです。

MathJax を導入すると Chrome  /  Chrome for Android  /  Internet Explorer  /  Microsoft Edge といった MathML に対応していないブラウザでも、MathML で書いた数式を表示できるようになります。

ウェブサイト製作者は(未対応ブラウザのことを意識する必要なしに) MathML を書けばよく、あとは MathJax が魔法のようにブラウザに見える形に変換してくれます。

MathJax は MathML のほかに Tex と LaTeX をサポートしています。本サイトの記事では ウェブ標準の観点から MathML を使用しますが、使い慣れているなら Tex と LaTeX で数式を記述することもできます。
MathJax TeX and LaTeX Support 

 

MathJax の導入方法

通常のWebサイト

MathJax の導入はHTMLの中にたった1行の<script>タグを追加するだけです。

 

HTML5 のページに導入するには以下のように <head> タグの中に記述します。なお <head> タグではなくても大丈夫です。<body> タグの直後や </body> タグの直前でも問題ありません。

<script>タグ中に 2.7.2 という数字がありますが、これは MathJax のバージョン番号です。最新バージョンは https://cdnjs.com/ にアクセスし、「MathJax」というキーワードで検索すると確認できます。

基本的にはこれで十分ですが、インストール方法についてもっと詳しく知りたい場合は MathJax 公式ドキュメントを参照ください。

WordPress サイトの場合

WordPress サイトの場合にはテーマ(テンプレート)に直接 <script> タグを埋め込む、または、プラグインにより MathJax を導入可能です。

プラグインはいくつかありますが、MathJax-LaTeX と Simple Mathjax の2つが定番のようです。MathJax に関するWordPressプラグインは下記より確認できます。
https://wordpress.org/plugins/search/mathjax/

WordPress の記事編集には「ビジュアル」と「テキスト」の2つのモードがありますが、MathML を使う記事は必ず「テキスト」を使用する必要があります。また、「ビジュアル」と「テキスト」を行き来すると、<math>タグのマークアップが崩れてしまうので、必ずテキストモードのみで編集しましょう。

次の記事2記事で、MathMLで様々な数式を書く方法を紹介します。MathML について基礎知識がある場合には、2つ目のサンプル付き記事に進みましょう。

はじめての MathML

【コピペOK】Webページに数式を表示する方法をサンプル付きで紹介

1 Comment

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です