OKWAVEパソコン版の推奨環境変更のお知らせ
  • ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:ホームページ上で数学の公式を表示)

ホームページ上で数学の公式をHTMLで表示させる方法とは?

このQ&Aのポイント
  • ホームページ上で数学の公式をHTMLで表示させるための最もスマートな方法について教えてください。
  • 数式の見た目を整えるためにHTMLで特殊な記述が必要なのか、または画像で作成する必要があるのか教えてください。
  • ホームページ上で数学の公式を表示させる方法についてアドバイスをお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

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> &#x00B1;<!--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>

oneday77
質問者

お礼

ORUKA1951様、有難う御座います。 なるほど、HTML5からmathMLが使えるのですね! これは助かりますね! >> 数式を書かれるなら、多分Texの書き方はご存知でしょうか はい、あまり詳しくは無いのですが大抵は書けるかと思います。 あと、FFで試しましたが綺麗に表示が確認出来ました。 もう少し補足頂いた情報と、ブラウザの対応状況を確認しつつmathMLで進めて見たいと思います。 本当に有難う御座いました。感謝いたします。

その他の回答 (2)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

追加情報です。最新ブラウザが使えれば、ネイティブで表示できないのは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のみ7年前から・・ 以下は作成方法など  ⇒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)
回答No.1

スタイルシートやフォントを駆使すれば はかなり何とかなると思うけど 基本的には無茶 画像で表現するのが一般的 ちなみに指数ならsupタグでそれっぽくできるわ それくらいね あとははてなダイアリーなどのブログサービスやMediaWikiなどを使えば 規則にのっとって記述したものを自動的に数式画像に変換してくれたりするけど それくらいじゃないかしら

関連するQ&A

専門家に質問してみよう