【コピペ可】Webページに数式を表示するサンプル集 – 分数・ルートから行列・積分まで網羅

Webページで方程式、分数、平方根(ルート)、累乗(2乗、3乗)、数列、微分・積分、行列といった数式を表示するにはどうすれば良いでしょうか? 複雑な数式をWebページで表示する方法をサンプルつきで紹介します。

はじめての方へ

Webページに数式を表示するには MathML というマークアップ言語と MathJax という JavaScript ライブラリを用います。MathML と MathJax について初めての方は Webページに数式を表示する方法を徹底解説 – 導入編 – および はじめての MathML を参照ください。

 

分数

分数を表示するには <mfrac> を使います。必要に応じて分子・分母をグループ化タグ <mrow> で囲みます。

x + 1 3 + 2 7

 

 

一次方程式・連立方程式

一次方程式

x 2 = 3 x + 4

<mo>&#x2062;<!–INVISIBLE TIMES–></mo> という記述は無くても表示上の問題ありませんが、数学的な意味を考慮するならつけておきましょう。

この記事では <mo>-</mo> のように – (ハイフンマイナス)を使っていますが、マイナスを正確に記述する場合 &#x2212; というコードを使います。

連立方程式

連立方程式は数学としては初歩的ですが、MathML で表示するのは少し複雑です。テーブルを組むための <mtable> というタグを使います。

<mtable> は HTML の <table> タグと同様です。<mtr> は <tr>、<mtd> は <td> に対応します。

{ x + y = 6 3 x + y = 2

 

累乗(2乗、3乗)、上付き添字

2乗、3乗…を表示するには <msup> タグを使用します。

5 x 3 + x 2

二次関数・三次関数 / 二次方程式・三次方程式

二次関数・三次関数 / 二次方程式・三次方程式も同様に <msup> で表示できます。

y = x 3 x 2 4 x + 1

指数・指数関数

指数関数は <msup> で表示できます。

y = a x

 

y = 1 3 x

上記サンプルコードの <mfenced> は丸括弧を表示するタグです。

<msup> の応用例

<math>とグループ化タグ <mrow> を合わせて使う応用例

e x + 1

 

添字(下付き添字)

添字を表示するには<msub> タグを使います。

x i

対数・対数関数

対数・対数関数は <msub> タグで表示できます。

y = log a x

 
<mo>&#x2061;<!–FUNCTION APPLICATION–></mo> という記述は無くても表示上の問題ありませんが、数学的な意味を考慮するならつけておきましょう。
 

自然対数の底e(ネイピア数)

自然対数の底(ネイピア数)は通常アルファベットの e で表示されますが、もしかすると単なる変数 e かもしれません。自然対数の底(ネイピア数)であることを正確に表示するため &ExponentialE; を使うことがあります。

log &ExponentialE; x

 

添字(上下添字)

上下に添字を表示するには<msubsup> タグを使います。

x i j

 

平方根・ルート

平方根(ルート)を表示するには <msqrt> タグを使います。

x + 1

立方根(三乗根)

立方根(三乗根)を表示するには <mroot> タグを使います。

x + 1 3

 
n乗根のような一般形も同様です。

a n

 

複素数・虚数

複素数・虚数には2通りの表示方法があります。

3 + i

 
もしかすると i は単なる変数かもしれません。虚数単位の記号iであることを正確に表現するには &ImaginaryI; を使います。

3 + &ImaginaryI;

 

シグマ(数列の和)

シグマ記号を表示するには &sum; または &#x2211; を使います。&#x2211; を使う場合にはコメントアウトを入れましょう。munderover タグで囲み、開始と終了を記述します。

k = 1 n

 

k = 1 n f x

 

三角関数(sin / cos / tan)

sin x / cos x / tan x は特別なタグは不要で <mi> で表示できます。ただし、下記ソースコードのように sin と x は別々に囲みます。

sin x

<mo>&#x2061;<!–FUNCTION APPLICATION–></mo>
という記述は無くても表示上の問題ありませんが、数学的な意味を考慮するならつけておきましょう。

x の代わりに θ(シータ) で記述したいなら &theta; というコードで表示可能です。

tan θ = b c

 
角度を数字で表示するには &#x2218; を使います。

cos 60

 

ベクトル

ベクトルを表示するには <mover> タグを使います。下のソースコードのように矢印には &rarr; または &#x2192; を使います。&#x2192;
の場合にはコメントアウトをつけておきましょう

a

 

b

 
2文字で表すベクトルも同じです。

AB

 

行列

丸括弧の行列

行列を表示するには <mfenced> と <mtable> タグを使用します。<mfenced> は外側の括弧、<mtable> は中の要素を表示します。

<mtable> は HTML の <table> タグと同様です。<mtr> は <tr>、<mtd> は <td> に対応します。

11 12 13 21 22 23

 

角括弧の行列

<mfenced open=”[” close=”]”> とすれば角括弧の行列になります。open と close の属性値を指定すれば | | や { } で表示することもできます。

11 12 13 21 22 23

 

極限・微分・積分

極限(lim)

極限(lim)の表示には特別なタグはありません。基本的な MathML タグの組み合わせ表現できます。

lim x 0 sin x x = 1

微分

物理で頻出する単位時間あたりの移動量 dx/dt を MathML で表示すると以下となります。

d x d t

 
通常は上記で良いですが、d が変数dではなく、微分記号d ということを正確に伝える場合は &dd; を用います。

x t

 

積分

積分(インテグラル)は &Integral; または &#x222b; を使って表示します。&#x222b; の場合にはコメントアウトをつけておきましょう。

区間については <msubsup> または <munderover> を使います。

0 1 x d x

 

0 d x x

 

0 d x x

 

数学記号や文字を調べる方法

± ≠ ≥ ∑ ∫ π ∞

これらはほんの一例ですが、数学(数式)には様々な記号や文字があります。これらを文字化けすることなく表示するには、数値文字参照または文字実体参照(参考ページ)を使わなければなりません。

入力したくてもコードがわからない場合には、下記ページが頼もしい味方になってくれるでしょう。

 

解消しない場合は?

以上の内容で中学・高校数学の多くをカバーできているかと思います。

しかし MathML は数学・物理・化学等あらゆる分野の数学的表現に対応したマークアップ言語で、ここで紹介した内容はその 1% にも満たないでしょう。

もし何か困った場合には MathML3 に関する公式ドキュメントを参照ください。

https://www.w3.org/TR/MathML3/

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です