MathML - 下付き文字と上付き文字
こんにちは、志を抱く数学者たちとウェブ開発者たち！今日は、MathMLの fascinante な世界に飛び込み、特に下付き文字と上付き文字に焦点を当てます。あなたの近所の親切なコンピュータ教師として、この旅を案内するのが楽しみです。ウェブ上の数学記号を簡単にしましょう！
下付き文字と上付き文字とは？
コードに入る前に、下付き文字と上付き文字が何かを理解しましょう。H₂O などの化学式を書いたり、 x² などの指数について話したりしていると、テキストの上か下に小さな数字が見えます。それが下付き文字と上付き文字です！
- 下付き文字：通常のテキストの少し下に表示される小さな文字。
- 上付き文字：通常のテキストの少し上に表示される小さな文字。
シntax
MathMLでは、下付き文字と上付き文字のために2つの主要な要素を使用します：
-
<msub>: 下付き文字用 -
<msup>: 上付き文字用
シntaxを分解しましょう：
<msub>
<mi>base</mi>
<mi>subscript</mi>
</msub>
<msup>
<mi>base</mi>
<mi>superscript</mi>
</msup>ここで、<mi>は「数学識別子」を意味し、通常は変数や関数名に使用されます。
パラメータ
<msub>と<msup>はどちらも2つの子要素を取ります：
- ベース要素（下付き文字や上付き文字を追加するもの）
- スクリプト要素（実際の下付き文字や上付き文字）
属性
<msub>と<msup>には独自の属性はありませんが、MathMLの全般的な属性を継承します。以下に一般的なものをいくつか示します：
| 属性 | 説明 |
|---|---|
class |
エレメントにクラス名を割り当てる |
id |
エレメントにユニークな識別子を提供する |
style |
インラインCSSスタイルを適用する |
例
実際の例を見て、これらの要素がどのように動作するか本当に理解しましょう。
例1: 化学式（H₂O）
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>H</mi>
<msub>
<mn>2</mn>
<mi>O</mi>
</msub>
</mrow>
</math>この例では、水の式を生成しています。<mrow>エレメントはHと下付きOを一组にします。<msub>エレメントは下付きを生成し、2をベース、Oを下付きとしています。
例2: 指数（x²）
<math xmlns="http://www.w3.org/1998/Math/MathML">
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
</math>ここでは、xの2乗を生成しています。ベースはxで、上付きは2です。
例3: 下付き文字と上付き文字の組み合わせ
<math xmlns="http://www.w3.org/1998/Math/MathML">
<msubsup>
<mi>a</mi>
<mi>i</mi>
<mi>j</mi>
</msubsup>
</math>この例では、<msubsup>を使用して、同一のベース要素に下付きと上付きを追加します。これは「aのj乗、iの下付き」と言っています。
出力
ブラウザがMathMLを正しくレンダリングする場合、これらの例は以下のように表示されるはずです：
- H₂O
- x²
- aij
すべてのブラウザがMathMLをネイティブにサポートしているわけではないため、MathJaxなどのポリフィルやJavaScriptライブラリを使用して、すべてのブラウザで一貫したレンダリングを行う必要があるかもしれません。
実用的なヒント
- シンプルに保つ：基本的な式から始めて、段階的に複雑さを増やしましょう。
- ブラウザのサポートを確認する：MathMLを異なるブラウザで常にテストします。
-
意味のある識別子を使用する：
<mi>x</mi>の代わりに<mi>変数</mi>を使用して、読みやすさを向上させます。
結論
おめでとうございます！あなたはMathMLの下付き文字と上付き文字の世界への第一歩を踏み出しました。練習は完璧を生みます。数学の教科書から式を作成したり、自分独自の数学的な表現を考案してみてください。
このまとめを締めくくるにあたり、ある生徒が私に言った言葉を思い出します、「数学は単純なアイデアを派手に書く方法而已です。」MathMLを使えば、その派手な書き方を誰にでもウェブ上でアクセス可能にしています！
探索を続け、コードを書き続け、そして最も重要な的是、数学を楽しみましょう！
Credits: Image by storyset