- ベストアンサー
ホームページ上で数学の公式をHTMLで表示させる方法とは？
- ホームページ上で数学の公式をHTMLで表示させるための最もスマートな方法について教えてください。
- 数式の見た目を整えるためにHTMLで特殊な記述が必要なのか、または画像で作成する必要があるのか教えてください。
- ホームページ上で数学の公式を表示させる方法についてアドバイスをお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
HTMLはその出生が科学技術文書なので、表示されて当然なのですが、残念ながら・・ しかし、次期HTML5ではmathMLが使えることになっています。 また、XMLで記述すれば、IEでもTechexplorerなどを使えば表示できるかと思います。 随分前(0.9.9あたり)から、firefoxはmathMLに対応していますから、下記が添付図のように表示できます。 ★firefoxをご利用ください。が一番簡単でしょう。 数式を書かれるなら、多分Texの書き方はご存知でしょうから、TexをmathMLに置換するツールは沢山あります。 下記はTexで書けば、 \left( x+\dfrac {a} {2}\right) ^{2}-\left( \dfrac {b} {2}\right) ^{2}=0 \chi =\dfrac {-b\pm \sqrt {b^{2}-4ac}} {2a} ★HTML5です。タブは＿に置換してあるので戻すこと。文字コードはUTF-8です。 <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="IRUKA"> ＿＿<!--[if IE]> ＿＿＿<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> ＿＿＿<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> ＿＿<![endif]-->＿<link rel="stylesheet" href="css/style.css"> <style media="screen"> <!-- p.mathML{font-size:2em;margin:0.5em 1em;} --> </style> </head> <body> ＿<header> ＿＿<h1 id="title">Your title</h1> ＿＿<nav> ＿＿＿<ul> ＿＿＿＿<li><a href="#">Some</a></li> ＿＿＿＿<li><a href="#">navigation</a></li> ＿＿＿＿<li><a href="#">links</a></li> ＿＿＿</ul> ＿＿</nav> ＿</header> ＿<section> ＿＿<aside> ＿＿＿<h3>Something aside</h3> ＿＿</aside> ＿＿<h2>A smaller heading</h2> ＿＿<p class="mathML"> ＿＿＿<math xmlns="http://www.w3.org/1998/Math/MathML"> ＿＿＿＿<mstyle displaystyle="true"> ＿＿＿＿＿<msup> ＿＿＿＿＿＿<mrow> ＿＿＿＿＿＿＿<mfenced> ＿＿＿＿＿＿＿＿<mrow> ＿＿＿＿＿＿＿＿＿<mi> x </mi> ＿＿＿＿＿＿＿＿＿<mo> + </mo> ＿＿＿＿＿＿＿＿＿<mfrac> ＿＿＿＿＿＿＿＿＿＿<mrow> ＿＿＿＿＿＿＿＿＿＿＿<mi> a </mi> ＿＿＿＿＿＿＿＿＿＿</mrow> ＿＿＿＿＿＿＿＿＿＿<mrow> ＿＿＿＿＿＿＿＿＿＿＿<mn> 2 </mn> ＿＿＿＿＿＿＿＿＿＿</mrow> ＿＿＿＿＿＿＿＿＿</mfrac> ＿＿＿＿＿＿＿＿</mrow> ＿＿＿＿＿＿＿</mfenced> ＿＿＿＿＿＿</mrow> ＿＿＿＿＿＿<mrow> ＿＿＿＿＿＿＿<mn> 2 </mn> ＿＿＿＿＿＿</mrow> ＿＿＿＿＿</msup> ＿＿＿＿＿<mo> - </mo> ＿＿＿＿＿<msup> ＿＿＿＿＿＿<mrow> ＿＿＿＿＿＿＿<mfenced> ＿＿＿＿＿＿＿＿<mrow> ＿＿＿＿＿＿＿＿＿<mfrac> ＿＿＿＿＿＿＿＿＿＿<mrow> ＿＿＿＿＿＿＿＿＿＿＿<mi> b </mi> ＿＿＿＿＿＿＿＿＿＿</mrow> ＿＿＿＿＿＿＿＿＿＿<mrow> ＿＿＿＿＿＿＿＿＿＿＿<mn> 2 </mn> ＿＿＿＿＿＿＿＿＿＿</mrow> ＿＿＿＿＿＿＿＿＿</mfrac> ＿＿＿＿＿＿＿＿</mrow> ＿＿＿＿＿＿＿</mfenced> ＿＿＿＿＿＿</mrow> ＿＿＿＿＿＿<mrow> ＿＿＿＿＿＿＿<mn> 2 </mn> ＿＿＿＿＿＿</mrow> ＿＿＿＿＿</msup> ＿＿＿＿＿<mo> = </mo> ＿＿＿＿＿<mn> 0 </mn> ＿＿＿＿</mstyle> ＿＿＿</math> ＿＿</p> ＿＿<p class="mathML"> ＿＿＿<math xmlns="http://www.w3.org/1998/Math/MathML"> ＿＿＿＿<mstyle displaystyle="true"> ＿＿＿＿＿<mi> x </mi> ＿＿＿＿＿<mo> = </mo> ＿＿＿＿＿<mfrac> ＿＿＿＿＿＿<mrow> ＿＿＿＿＿＿＿<mo> - </mo> ＿＿＿＿＿＿＿<mi> b </mi> ＿＿＿＿＿＿＿<mo> ±<!--plus-minus sign--> </mo> ＿＿＿＿＿＿＿<msqrt> ＿＿＿＿＿＿＿＿<msup> ＿＿＿＿＿＿＿＿＿<mrow> ＿＿＿＿＿＿＿＿＿＿<mi> b </mi> ＿＿＿＿＿＿＿＿＿</mrow> ＿＿＿＿＿＿＿＿＿<mrow> ＿＿＿＿＿＿＿＿＿＿<mn> 2 </mn> ＿＿＿＿＿＿＿＿＿</mrow> ＿＿＿＿＿＿＿＿</msup> ＿＿＿＿＿＿＿＿<mo> - </mo> ＿＿＿＿＿＿＿＿<mn> 4 </mn> ＿＿＿＿＿＿＿＿<mi> a </mi> ＿＿＿＿＿＿＿＿<mi> c </mi> ＿＿＿＿＿＿＿</msqrt> ＿＿＿＿＿＿</mrow> ＿＿＿＿＿＿<mrow> ＿＿＿＿＿＿＿<mn> 2 </mn> ＿＿＿＿＿＿＿<mi> a </mi> ＿＿＿＿＿＿</mrow> ＿＿＿＿＿</mfrac> ＿＿＿＿</mstyle> ＿＿＿</math> ＿＿</p> ＿</section> ＿<section> ＿＿<h2>A smaller heading</h2> ＿＿<p> ＿＿</p> ＿</section> ＿<footer> ＿＿<h3>A nice footer</h3> ＿</footer> </body> </html>
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
追加情報です。最新ブラウザが使えれば、ネイティブで表示できないのはIEだけのようですね。 ⇒MathML情報( http://www.fukuoka-edu.ac.jp/~fujimoto/mathml.html ) こちらは古い ⇒MathMLに対応したブラウザ：北大文「魅力ある大学院教育」( http://humansci.let.hokudai.ac.jp/m/terao/stat/browse/browser.html ) これで見るとfirefoxのみ７年前から・・ 以下は作成方法など ⇒Authoring MathML for Mozilla( http://www.mozilla-japan.org/projects/mathml/authoring.html ) ⇒MathML( http://www.jagat.or.jp/sgml/mathml/ ) ⇒Mathematical Markup Language - Wikipedia( http://ja.wikipedia.org/wiki/Mathematical_Markup_Language )
- askaaska
- ベストアンサー率35% (1455/4149)
スタイルシートやフォントを駆使すれば はかなり何とかなると思うけど 基本的には無茶 画像で表現するのが一般的 ちなみに指数ならsupタグでそれっぽくできるわ それくらいね あとははてなダイアリーなどのブログサービスやMediaWikiなどを使えば 規則にのっとって記述したものを自動的に数式画像に変換してくれたりするけど それくらいじゃないかしら
お礼
ORUKA1951様、有難う御座います。 なるほど、HTML5からmathMLが使えるのですね！ これは助かりますね！ >> 数式を書かれるなら、多分Texの書き方はご存知でしょうか はい、あまり詳しくは無いのですが大抵は書けるかと思います。 あと、FFで試しましたが綺麗に表示が確認出来ました。 もう少し補足頂いた情報と、ブラウザの対応状況を確認しつつmathMLで進めて見たいと思います。 本当に有難う御座いました。感謝いたします。