JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5でMathMLを使う方法：数式を表示するサンプルコード付き解説

HTML5では、HTML構文の中にMathML（Mathematical Markup Language）要素を直接記述できるようになりました。文書内に <math> から </math> までのタグで囲むことで、数式をマークアップとして埋め込むことが可能です。

MathMLとは？

MathMLは、W3Cが策定したXMLベースのマークアップ言語で、数学的な表現や数式をWebページ上に正確に記述するために使用されます。分数、累乗、ルートなどの複雑な数式も、画像を使わずテキストとして表現できるため、検索エンジンやスクリーンリーダーにも認識されやすいというメリットがあります。

ブラウザの対応状況

現在、主要なWebブラウザの多くはMathMLタグを表示できます。ただし、古いバージョンのブラウザや一部の環境では正しくレンダリングされない場合があります。もし使用しているブラウザがMathMLに対応していない場合は、最新版のFirefoxの利用をおすすめします。Firefoxは長年にわたりMathMLサポートに力を入れており、安定した表示が期待できます。

MathMLの記述例：三平方の定理

それでは、実際のサンプルコードを見てみましょう。以下は、有名な「三平方の定理（ピタゴラスの定理）」a² + b² = c² をMathMLで表現した例です。

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Pythagorean theorem</title>
    </head>
    <body>
        <math xmlns="https://www.w3.org/1998/Math/MathML">
            <mrow>
                <msup><mi>a</mi><mn>2</mn></msup>
                <mo>+</mo>
                <msup><mi>b</mi><mn>2</mn></msup>
                <mo>=</mo>
                <msup><mi>c</mi><mn>2</mn></msup>
            </mrow>
        </math>
    </body>
</html>

コードのポイント解説

このサンプルで使われている主なMathML要素は以下の通りです。

  • <mrow>： 数式の要素を横一列にグループ化します。
  • <msup>： 累乗（べき乗）を表現します。基底文字と指数を子要素として持ちます。
  • <mi>： 変数などの識別子（identifier）を表します。ここでは a、b、c が該当します。
  • <mn>： 数値（number）を表します。ここでは指数の「2」です。
  • <mo>： 演算子（operator）を表します。「+」や「=」などが該当します。

このように、MathMLを使えば数式を意味のある構造として記述でき、ブラウザが自動的に美しい数式として描画してくれます。教育関連サイトや科学技術系のコンテンツを作成する際に、ぜひ活用してみてください。

  1. HTMLのbase要素のtarget属性とは？リンクのデフォルト表示先を一括設定する方法

    base要素のtarget属性とは HTMLの<base>要素におけるtarget属性は、ドキュメント内に含まれるすべてのハイパーリンクに対して、デフォルトの表示先（ターゲット）を一括して設定するための属性です。各リンクに個別にtarget属性を書かなくても、<base>要素で一度指定しておけば、ページ全体のリンクの開き方を統一できるのが大きな特徴です。 基本構文 target属性の基本的な構文は以下のとおりです。 <base target=_blank|_self|_parent|_top|frame> target属性に指定できる値 target属性

  2. HTMLのbase要素におけるhref属性の使い方｜ベースURLの設定方法を解説

    base要素のhref属性とは HTMLの<base>要素におけるhref属性は、ドキュメント内のすべての相対URLに対する基準URL（ベースURL）を設定するための属性です。<base>要素は通常、<head>セクション内に一度だけ記述します。 たとえば、ベースURLをhttps://example.com/tutorialsと設定した場合、/html、/java、/jqueryといった相対URLは、最終的に次のように解決されます。 https://example.com/tutorials/html https://example.com/tutoria