下に「二次方程式の解の公式」が表示されているかと思いますが、画像でも特殊技術でもなく、WEB標準に準拠して表示しています。
これから紹介する方法をマスターすれば、このようにWeb標準に準拠し、複雑な数式をWebページに表示することができるようになります。
数式を表示するための基礎知識
数式をWebページで表現するには MathML （Mathematical Markup Language）というマークアップ言語を使います。MathML は <math> タグにより HTML の中に直接記述することが可能です。
|
1 2 3 4 5 6 |
<!-- x + 1 --> <math> <mi>x</mi> <mo>+</mo> <mn>1</mn> </math> |
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 TeX and LaTeX Support
MathJax の導入方法
通常のWebサイト
MathJax の導入はHTMLの中にたった１行の<script>タグを追加するだけです。
|
1 |
<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML"></script> |
HTML5 のページに導入するには以下のように <head> タグの中に記述します。なお <head> タグではなくても大丈夫です。<body> タグの直後や </body> タグの直前でも問題ありません。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>MathML in HTML5</title> <script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML"></script> </head> <body> ... ページのコンテンツ ... </body> </html> |
<script>タグ中に 2.7.2 という数字がありますが、これは MathJax のバージョン番号です。最新バージョンは https://cdnjs.com/ にアクセスし、「MathJax」というキーワードで検索すると確認できます。
基本的にはこれで十分ですが、インストール方法についてもっと詳しく知りたい場合は MathJax 公式ドキュメントを参照ください。
WordPress サイトの場合
WordPress サイトの場合にはテーマ（テンプレート）に直接 <script> タグを埋め込む、または、プラグインにより MathJax を導入可能です。
プラグインはいくつかありますが、MathJax-LaTeX と Simple Mathjax の２つが定番のようです。MathJax に関するWordPressプラグインは下記より確認できます。
https://wordpress.org/plugins/search/mathjax/
次の記事2記事で、MathMLで様々な数式を書く方法を紹介します。MathML について基礎知識がある場合には、２つ目のサンプル付き記事に進みましょう。
[…] Webページに数式を表示する方法を徹底解説 – 導入編 – に MathML とクロスブラウザのためのJavaScriptライブラリについて、まとめました。 […]