MathJaxを使ってウェブ上に数式を表示させると、中央揃え（中央寄せ）で表示されますよね。
でも、
いやー、左寄せで表示させたいんだよね
って思う方は多いかもしれません。教科書や参考書でも、基本的に数式はぜんぶ左揃えですし。
ということでこのページでは、MathJaxで数式を左寄せするやり方をご紹介したいと思います。
いつでも左寄せにしたい場合
「左寄せにしたい！」という人には2種類いると思います。
- 基本、いつも左寄せ。たまに中央寄せ。
- たまに左寄せにできればOK。
の２種類です。
この2パターンに分けて、それぞれ解説していきます。
まずは、
「基本的にいつも左寄せキボンヌ(^人^)」
という場合からいきます！
唐突に死語ぶっ込むのやめろ
方法① scriptコードを追加する
MathJaxはJavaScriptというプログラミング言語で動いているのですが、このコードに
お願い！左寄せにして！
というコードを追加すると、左寄せにしてくれます。
サイトでMathJaxを使うときは、MathJaxのスクリプトコード（<script>…</script>）を挿入しているはずです。
こういうコードです。
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>数式を左寄せにするには、このコードの前に次のコードを追加すればOKです。
<script>
MathJax = { chtml: { displayAlign: "left", }
};
</script>ということで、挿入するコードを全部書くと次のようになります。
<script>
MathJax = { chtml: { displayAlign: "left", }
};
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>ちなみに、インデントの調整なども上と同様の方法で行えます。
詳しくはMathJax公式ページに書いてあります。
参考 CommonHTML Output Processor OptionsMathJax 3.2 documentation
「ここだけ中央寄せにしたい」というときは
「基本的に左寄せでOKなんだけど、ここだけは数式を中央揃えにしたい。」
こういうときは、CSSで対応します。
まず、CSSに以下のとおり追加します。
div.imadake-center mjx-container[jax="CHTML"][justify="left"]{ text-align: center;
}コード中のdiv.imadake-centerのimadake-centerのところは、好きな文字列でOKです（ただし、既にあるクラス名と同じにならないように気をつけてください）。
そして、中央寄せしたい数式のMathJaxコードを<div class="imadake-center">と</div>で囲みます
<div class="imadake-center">
\[x^3+y^3=\left(x+y\right)\left(x^2-xy+y^2\right)\]
</div>これで、この数式だけが中央寄せになってくれます。
この「scriptコードを追加する方法」で実際にMathJaxの数式を左寄せにした、サンプルページを用意してみました。
よければチェックしてみてください。
方法② CSSで左寄せにする
もう１つの方法が、CSSで左寄せにするやり方です。
サイト・ブログ運営に慣れていて、「どんとこいCSS！！」という場合にはこちらの方法もオススメです。
まず、CSSに以下のようにコードを追加します。
div mjx-container[jax="CHTML"][display="true"] { text-align: left;
}これで、MathJaxの数式すべてが左寄せ（左揃え）になってくれます。
一度CSSを追加すれば後は何もしなくても良いので、①のscriptコードを追加する方法よりも楽ちんかもしれないです。
中央寄せにしたいときは
「ここだけ中央寄せにしたい！」というときは、
- CSSを追加（事前準備）
- HTMLを編集
のように、scriptコードで左寄せにしたときと同様にやればOKです。
まずは事前準備として、CSSに次のように追加します。
div.imadake-center mjx-container[jax="CHTML"][display="true"] { text-align: center;
}その上で、中央寄せにしたい数式コードを<div class="imadake-center">と</div>で囲みます。
これで、この数式だけが中央寄せになってくれます。
CSSで数式を左寄せにしたサンプルページを用意しました。よろしければご覧ください。
「たまに左寄せ」にする方法
「いつもはデフォルト設定の中央寄せで良いんだけど、たまに左寄せにしたいときがある」
という場合は、つぎの2つの方法があります。
- インライン表記でMathJaxコードを書く
- CSSで左寄せにする
の２つです。
①インライン表記で左寄せにする
たとえば、つぎの数式は中央寄せになっているはずです。
\[E=mc^2\]この数式のコードは、こうです。↓
\[E=mc^2\]これは「1行に数式以外は入らない」書き方でして、CSS的に言うと”block”表示になっています。
この書き方ではなくて次のようにコードを書くと、CSS的に言う”inline（インライン）”表示になります。
\(E=mc^2\)数式が左寄せになりました。
コードの書き方で違うのは、最初と最後だけです。数式が\[で始まって\]で終わっていたのが、\(で始まって\)で終わるように変更しています。
このように、MathJaxのコードを\(と\)で挟むように書くと、数式は左寄せになってくれます。
そもそもインライン表記は文中で数式を表示したいときに使うものなので、次のような使い方が想定されています。
<p>\(E=mc^2\) は、アインシュタインが・・・</p>【実際の表示】
\(E=mc^2\) は、アインシュタインが・・・
一方、数式を\[と\]で囲むと、数式と文章は別の行に分かれます。
<p>\[E=mc^2\] は、アインシュタインが・・・</p>【実際の表示】
\[E=mc^2\] は、アインシュタインが・・・
インライン表記で左寄せにするときの注意点
インライン表記を使えば数式をお手軽に左寄せにできるのですが、１つ注意点があります。
それは、「分数式などの縦方向に長い数式が小さく表示されてしまう」ということです。
分数式をインラインで書いた実際の例が、こちらです。
<p>\(\frac{1}{x}+\frac{1}{y}=\frac{x+y}{xy}\)</p>【実際の表示】
\(\frac{1}{x}+\frac{1}{y}=\frac{x+y}{xy}\)
別行立て（block表示）で同じ数式を書いた場合は、文字が小さくなりません。
<p>\[\frac{1}{x}+\frac{1}{y}=\frac{x+y}{xy}\]</p>【実際の表示】
\[\frac{1}{x}+\frac{1}{y}=\frac{x+y}{xy}\]
このように、インライン表記で数式を左寄せにする場合、数式の内容によっては文字が小さくなって見にくくなってしまいます。
縦に大きい数式を左寄せにしたいときには、次にご紹介する「CSSを使う方法」がおすすめです。
②CSSで左寄せにする
上で書いた方法と基本は同じです。
- CSSを追加する（事前準備）
- HTMLを編集する（その都度）
という流れです。
①CSSを追加する
次のようなコードをCSSに追加しておきます。
div.imadake-left mjx-container[jax="CHTML"][display="true"] { text-align: left;
}div.imadake-leftのimadake-leftの部分は、好きな文字列でOKです（他と被らなければ）。
②HTMLを編集する
左寄せにしたい数式を書くとき、そのMathJaxコードを<div class="imadake-left">と</div>で囲みます。
<div class="imadake-left">
\[a+b\geqq2\sqrt{ab}\]
</div>【実際の表示】
まとめ
以上、MathJaxの数式を左寄せにする方法として
- scriptコードを追加する方法
- CSSを追加する方法
- インライン表記を使う方法
の３つをご紹介しました。
ぜひやってみてください。
