【理系＆WEBオタク向け】数式や化学式で使えそうなHTML手法5選

HTMLで作れる、使えそうな数式や化学式を書くときの方法5選

プログラミングをやってる人ってなんとなく理系が多いイメージ（あくまで個人の感想です）。
さらにこの記事を見ているのはほとんどWEB系のエンジニアだということを考えれば理系×WEBエンジニアというニッチな層の人向けの記事になります。

（数学も科学も大ッキライな人、すみません。。。いや、むしろ理系科目が苦手な人のほうがコピペで使えるから役に立つ記事かも？！）

上付き文字（例:平方メートル）

平方メートル = 10m²

sample.html

10m<sup>2</sup>

下付き文字（例：水 化学式等）

水 = H₂0

sample.html

H<sub>2</sub>0

分数

分数作成ツールで作成可能。
テーブル組みで表現されます。

<table class="BunsuTbl"><tbody><tr class="trBunshi"><td class="Sei0" rowspan="2"></td><td class="Bunshi">1</td></tr><tr class="trBunbo"><td class="Bunbo">100</td></tr></tbody></table>

ツール：http://atm-tkd.sakura.ne.jp/math/etc/bunsu/bunsuhyoki110218.html

二次関数とかで使うようなかっこいい「f」や「x」

sample.html

<em>f</em>(<em>x</em>)

style.css

em {
  font-family: Times New Roman, Times, sans-serif;
}

グラフなど

読みたい人だけ読んでください。。。

おまけ

「MathML」というHTMLで数式を書くためのマークアップ方法もあるみたいですね。
私は使ったことはありませんが、普通のWEBサイトを作るだけならおそらく使う機会はこないような気がします。。。
こちらも読みたい人だけ読んでください。。。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ