Warning: The magic method InvisibleReCaptcha\MchLib\Plugin\MchBasePublicPlugin::__wakeup() must have public visibility in /home/c7644036/public_html/guzlog.com/wp-content/plugins/invisible-recaptcha/includes/plugin/MchBasePublicPlugin.php on line 37
【サンプル】CSSで数式を左寄せ【MathJax】 | じょうつよ読書ノート

【サンプル】CSSで数式を左寄せ【MathJax】

このページでは、CSSを使ってMathJaxの数式を左寄せにしています。

MathJaxのscriptコードはいじっていません。

HTML
<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>

いつものコードだけです。

CSSに次のようなコードを追加すると、すべてのMathJax数式が左寄せになります。

CSS
div mjx-container[jax="CHTML"][display="true"] {	text-align: left;
}

この状態で実際にMathJaxの数式コードを書いてみます。

ここでは次のとおりに書きました。

HTML(MathJaxコード)
\[\frac1m+\frac1n=\frac{3}{77}\]
\[\Leftrightarrow\frac{m+n}{mn}=\frac{3}{77}\]
\[\Leftrightarrow3mn-77m-77n=0\]

実際の表示がこちらです。

\[\frac1m+\frac1n=\frac{3}{77}\] \[\Leftrightarrow\frac{m+n}{mn}=\frac{3}{77}\] \[\Leftrightarrow3mn-77m-77n=0\]

きちんと左寄せになっているはずです。

これで、すべてのMathJax数式が左揃え表示になってくれます。

ただ、「ここは中央寄せにしたい!」というときもありますよね。

そういうときはその都度、次のとおりにやればOKです。

  1. CSSを追加(事前準備)
  2. HTMLを編集

まず、中央寄せにするためのCSSを事前に追加しておきます。

CSS
div.imadake-center mjx-container[jax="CHTML"][display="true"] {	text-align: center;
}

その上で、中央寄せにしたい数式コードを<div class="imadake-center"></div>で囲めばOKです。

実際のHTMLの書き方がこちらです。

HTML
<div class="imadake-center">
\[\frac1m+\frac1n=\frac{3}{77}\]
\[\Leftrightarrow\frac{m+n}{mn}=\frac{3}{77}\]
\[\Leftrightarrow3mn-77m-77n=0\]
</div>

実際の表示がこちらです。

\[\frac1m+\frac1n=\frac{3}{77}\] \[\Leftrightarrow\frac{m+n}{mn}=\frac{3}{77}\] \[\Leftrightarrow3mn-77m-77n=0\]

ちゃんと中央寄せになっているはずです。

MathJaxの数式を左寄せにする方法については、こちらのページでより詳しく解説しています。

よろしければご覧ください!