サイノアHTMLで数式を扱えないかと調べてみました。結論を言えば、ある程度まではCSSを使ってできないことはありません。しかし、きれいな数式や複雑な数式を書くにはHTMLやCSSだけでは、やはり無理があります。WordPressなら、MathJax-LaTeXプラグインをを使えば、LaTeX記法できれいな数式が表現できます。
tableを使った表組みによる分数表現
参照: http://atm-tkd.sakura.ne.jp/math/etc/bunsu/bunsuhyoki110218.html –(1)
| a | = | b | |
| c |
Simplicityとは相性が悪いようで、正しく表示されません（tableに関してのCSSが定義されているのでしょう）。
CSSによる分数表現
参照: http://hooki.blog23.fc2.com/blog-entry-24.html
a=bc
それらしく表示できます。しかし、なんだか詰まった感じがします。=の前後を開けると下のように少し見やすくなります。
a = bc
指数や添字も付けられます。(1)のCSSを活用。
X = Y5Z1+ Z2
元コード
X = <span class="fraction">Y<span class="num_super">5</span><span class="sep"></span>Z<span class="num_sub">1</span>+ Z<span class="num_sub">2</span></span>
CSSによるルート記号
ルート記号は、HTMLでは√で表現できますが、あくまで一文字です。式全体にかかるような表記はできません。無理矢理表現するなら括弧を使うくらい？
√(2 + x)
理解はできますが、さすがにこれは…。そこで、CSSと組合せてそれらしく見せる方法。
参照: http://sookibizviz.blog81.fc2.com/blog-entry-1850.html
√2 + x
元コード
√<span style="text-decoration: overline">2 + x</span>
これはそれらしく見えるのですが、指数や添字があると、残念ながら、線がガタガタします。
a = √b2+ c2
a = √<span style="text-decoration: overline">b<span class="num_super">2</span>+ c<span class="num_super">2</span></span>
X = Y5√Z1+ Z2
X = <span class="fraction">Y<span class="num_super">5</span><span class="sep"></span>√<span style="text-decoration: overline">Z<span class="num_sub">1</span>+ Z<span class="num_sub">2</span></span></span>
MathJax-LaTex
MathJaxというJavaScriptを使った数式表現ライブラリがあります。これを使えば、きれいな数式が書けます。
参照: https://oku.edu.mie-u.ac.jp/~okumura/javascript/mathjax.html
WordPressにはMathJax-LaTeXというプラグインがあります。これで、上のサンプルもこのように美しく表現できます。
$$a=\frac{b}{c}$$
$$a=\frac{b}{c}$$
$$a=\sqrt{b^2+b^2}$$
$$a=\sqrt{b^2+b^2}$$
$$X=\frac{Y^5}{\sqrt{Z_1+Z_2}}$$
$$X=\frac{Y^5}{\sqrt{Z_1+Z_2}}$$
日本語も大丈夫。
$$毎月の返済額=\frac{借入金額\times 利率 \times (1+利率)^{返済回数}}{(1+利率)^{返済回数}-1}$$
$$毎月の返済額=\frac{借入金額\times 利率 \times (1+利率)^{返済回数}}{(1+利率)^{返済回数}-1}$$
もちろん、ややこしい数式も。
$$\int_0^{\frac{\pi}{2}}\sin^n xdx=\int_0^{\frac{\pi}{2}}\cos^n xdx$$
$$\int_0^{\frac{\pi}{2}}\sin^n xdx=\int_0^{\frac{\pi}{2}}\cos^n xdx$$
参考:
日本語OKなWordPress数式プラグイン「Mathjax Latex」
MathJaxを使って、Web上に数式を表示
LaTeXコマンド – MathJaxを使って、Web上に数式を表示
MathJaxを使って、Web上に数式を表示する方法を紹介します。 MathJaxとは MathJax とは、LaTeX や MathML
LaTeXコマンド集
MathJax-LaTeXでは、数式はセンタリングされます。このサイトでは、下記サイトを参考に、左詰めのCSSを追加して式を左に寄せています。
