diff --git a/files/ja/web/mathml/authoring/index.md b/files/ja/web/mathml/authoring/index.md index 4b30a201e77840..d1e20ef8c252a1 100644 --- a/files/ja/web/mathml/authoring/index.md +++ b/files/ja/web/mathml/authoring/index.md @@ -2,7 +2,7 @@ title: MathML の記述 slug: Web/MathML/Authoring l10n: - sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- {{MathMLRef}} @@ -22,10 +22,10 @@ MathML の数式がオーサリングツールで生成されるとしても、 - MathML in HTML5 + MathML in HTML -

MathML in HTML5

+

MathML in HTML

One over square root of two (inline style): @@ -68,7 +68,7 @@ MathML に対応していないブラウザーに対しては、代替機構を ``` -ただ、もっと高度な表現も使いたいという場合にはもう少し大きい [MathJax](https://www.mathjax.org) ライブラリーを用いると良いでしょう。 +ただ、もっと高度な表現も使いたいという場合にはもう少し大きい [MathJax](https://www.mathjax.org/) ライブラリーを用いると良いでしょう。 ```html @@ -85,7 +85,7 @@ MathML に対応していないブラウザーに対しては、代替機構を #### 数学記号用のフォント -[MathML フォント](/ja/docs/Web/MathML/Fonts)の記事で説明したように、数学フォントは MathML コンテンツをレンダリングするのに役立ちます。そのため、[そのようなフォントのインストール手順](/ja/docs/Web/MathML/Fonts#インストール手順)を共有したり、[ウェブフォント](/ja/docs/Learn/CSS/Styling_text/Web_fonts)として指定されたフォントを提供することは常によい考えです。 +[MathML フォント](/ja/docs/Web/MathML/Fonts)の記事で説明したように、数学フォントは MathML コンテンツをレンダリングするのに役立ちます。そのため、[そのようなフォントのインストール手順](/ja/docs/Web/MathML/Fonts#インストール手順)を共有したり、[ウェブフォント](/ja/docs/Learn_web_development/Core/Text_styling/Web_fonts)として指定されたフォントを提供することは常によい考えです。 [MathFonts ページ](https://fred-wang.github.io/MathFonts/)は、そのようなウェブフォントを適切なスタイルシートとともに提供しています。例えば、以下の行を文書内のヘッダーに挿入するだけで、フォールバックのウェブフォントとともに現代の欧文フォントを選択することができます。 @@ -141,7 +141,7 @@ MathML に対応していないブラウザーに対しては、代替機構を ``` -LaTeXに慣れない場合は、 [ASCIIMath](http://asciimath.org/#syntax) や [jqMath](https://mathscribe.com/author/jqmath.html) などの構文も利用できます。 JavaScript ライブラリーを読み込んで、適切な区切り文字を使用してください。 +LaTeXに慣れない場合は、 [ASCIIMath](https://asciimath.org/#syntax) や [jqMath](https://mathscribe.com/author/jqmath.html) などの構文も利用できます。 JavaScript ライブラリーを読み込んで、適切な区切り文字を使用してください。 ```html @@ -199,7 +199,7 @@ cat input.html | node TeXZilla.js streamfilter > output.html このコマンドを実行すると、以下の HTML 出力を格納したファイル `output.html` が作成されます。ドルで区切られた数式は MathML に変換されています。 ```html-nolint - + @@ -210,12 +210,12 @@ cat input.html | node TeXZilla.js streamfilter > output.html

One over square root of two (inline style): - 12\frac{1}{\sqrt{2}} + 12\frac{1}{\sqrt{2}}

One over square root of two (display style): - 12\frac{1}{\sqrt{2}} + 12\frac{1}{\sqrt{2}}

@@ -236,7 +236,7 @@ latexmlc --dest foo.html --javascript=https://fred-wang.github.io/mathjax.js/mpa ``` > [!NOTE] -> コマンドラインツールはサーバー側で使用することができます。例えば、 [MediaWiki](https://www.mediawiki.org/wiki/MediaWiki) は [Mathoid](https://github.com/wikimedia/mathoid) を介して LaTeX から MathML への変換を行います。 +> コマンドラインツールはサーバー側で使用することができます。例えば、 [MediaWiki](https://www.mediawiki.org/wiki/MediaWiki) は [Mathoid](https://github.com/wikimedia/mediawiki-services-mathoid) を介して LaTeX から MathML への変換を行います。 ## グラフィカルインターフェイス @@ -271,6 +271,6 @@ latexmlc --dest foo.html --javascript=https://fred-wang.github.io/mathjax.js/mpa ## 光学文字認識・手書き文字認識 -数学を入力する最後のオプションは、[光学式文字認識](https://ja.wikipedia.org/wiki/光学文字認識)や[手書き文字認識](https://ja.wikipedia.org/wiki/手書き文字認識)のユーザーインターフェイスによるものです。これらのツールのいくつかは数式に対応しており、 MathML としてエクスポートすることができます。以下のスクリーンショットは [MyScript のデモ](https://webdemo.myscript.com/views/math/index.html)を示しています。 +数学を入力する最後のオプションは、[光学式文字認識 (OCR)](https://ja.wikipedia.org/wiki/光学文字認識) や[手書き文字認識](https://ja.wikipedia.org/wiki/手書き文字認識)のユーザーインターフェイスによるものです。これらのツールのいくつかは数式に対応しており、 MathML としてエクスポートすることができます。以下のスクリーンショットは [MyScript のデモ](https://webdemo.myscript.com/views/math/index.html)を示しています。 ![MyScript](myscript.png) diff --git a/files/ja/web/mathml/guides/fractions_and_roots/index.md b/files/ja/web/mathml/guides/fractions_and_roots/index.md index 8b857215b97b4d..9db5499f9f2549 100644 --- a/files/ja/web/mathml/guides/fractions_and_roots/index.md +++ b/files/ja/web/mathml/guides/fractions_and_roots/index.md @@ -1,45 +1,19 @@ --- title: MathML 分数と根号 slug: Web/MathML/Guides/Fractions_and_roots -original_slug: Learn/MathML/First_steps/Fractions_and_roots l10n: - sourceCommit: 4bddde3e2b86234eb4594809082873fc5bf00ee3 + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Text_containers", "Learn/MathML/First_steps/Scripts", "Learn/MathML/First_steps")}} +{{MathMLRef}} -この記事では、テキストコンテナーを利用して、分数や根号を入れ子にしてより複雑な MathML 式を構築する方法を説明します。 +{{PreviousMenuNext("Web/MathML/Guides/Text_containers", "Web/MathML/Guides/Scripts", "Web/MathML/Guides")}} - - - - - - - - - - - -
前提知識: - 基本的なソフトウェアがインストールされていること、 - ファイルでの作業に関する基本的な知識、 HTML の基本（ - HTML 入門を学ぶこと） -
目標: - 分数や平方根を書くのに用いる MathML 要素を習得すること。 -
+この記事では、テキストコンテナーを利用して、分数や根号を入れ子にしてより複雑な MathML 式を構築する方法を説明します。 ## \, \, \ のサブツリー -[MathML を始めよう](/ja/docs/Learn/MathML/First_steps/Getting_started)の記事で、分数を記述するための `` 要素をすでに紹介しました。ここでは、根号を表す新しい要素（`` と ``）を追加した基本的な例を考えてみましょう。 +[MathML を始めよう](/ja/docs/Web/MathML/Guides/Getting_started)の記事で、分数を記述するための `` 要素をすでに紹介しました。ここでは、根号を表す新しい要素（`` と ``）を追加した基本的な例を考えてみましょう。 ```html @@ -71,106 +45,140 @@ l10n: ![mfrac, msqrt, mroot のスクリーンショット](mfrac-msqrt-mroot.png) - すでに `` 要素が分数として描画されることは知っていますね。最初の子要素（分子）は横棒で区切られた 2 つ目の子要素（分母）の上に描画されます。 -- ``は平方根としてレンダリングされます。子要素は [``](/ja/docs/Learn/MathML/First_steps/Getting_started#mrow_要素でのグループ化) のように並べられ、ルート記号 √ が先頭に付き、完全に上付き線で覆われます。 +- ``は平方根としてレンダリングされます。子要素は [``](/ja/docs/Web/MathML/Guides/Getting_started#mrow_要素でのグループ化) のように並べられ、ルート記号 √ が先頭に付き、完全に上付き線で覆われます。 - 最後に、 `` 要素は n 乗根としてレンダリングされます。最初の要素は根号に覆われ、 2 つ目の要素はルートの次数として使用され、前置上付き文字としてレンダリングされます。 ### アクティブラーニング: 異なる要素を入れ子にする MathML のサブツリーとその視覚的レンダリングとの関連を理解したかどうかを確認するための単純な練習です。この文書には MathML の数式が格納されており、その MathML の数式内のサブツリーに対応するすべてのサブツリーを調べる必要があります。それが終わったら、MathML 式のソースを検査し、それがあなたの予想と一致しているかどうかを確認することができます。 -```html hidden - - +```html-nolint hidden + + 数式記号のあるマイページ - + -

- - - - 2 - - - 4 - 3 - - - + - - 5 - - 6 - 7 - - - + - - 8 - − - 9 - -

- -
    -
  1. - - mfrac に mroot が 1 番目の子として、 msqrt が 2 番目の子として入っている。 -
    2. -
  2. - - mroot に mn が 1 番目の子として、 mfrac が 2 番目の子として入っている。 -
    3. -
  3. - - msqrt に mfrac 要素が入っている。 -
    4. -
  4. - - msqrt に 1 つの mn の子がある。 +

    + + + + 2 + + + 4 + 3 + + + + + + 5 + + 6 + 7 + + + + + + 8 + − + 9 + + +

    + +
      +
    1. + + mfrac に mroot が 1 番目の子として、 msqrt が 2 番目の子として入っている。 +
      2. +
    2. + + mroot に mn が 1 番目の子として、 mfrac が 2 番目の子として入っている。 +
      3. +
    3. + + msqrt に mfrac 要素が入っている。
      4. -
    4. - - mroot に mfrac が 1 番目の子として、 mn が 2 番目の子として入っている。 -
      5. -
    5. - - msqrt に mn, mo, mn のリストの子がある。 -
      6. -
    6. - - mfrac に msqrt が 1 番目の子として、 mroot が 2 番目の子として入っている。 -
      7. -
    7. - - mfrac に msqrt, mn, msqrt のリストの子がある。 -
      8. -
    8. - - mroot に 1 つの mn の子がある。 -
      9. -
    9. - - mfrac に 2 つの mn の子がある。 -
      10. -
    10. - - msqrt に 5 つの mn の子がある。 -
      11. -
    11. - - mroot に 2 つの mn の子がある。 -
      12. -
    -

    - -

    -

    - -

    +
  5. + + msqrt に 1 つの mn の子がある。 +
    6. +
  6. + + mroot に mfrac が 1 番目の子として、 mn が 2 番目の子として入っている。 +
    7. +
  7. + + msqrt に mn, mo, mn のリストの子がある。 +
    8. +
  8. + + mfrac に msqrt が 1 番目の子として、 mroot が 2 番目の子として入っている。 +
    9. +
  9. + + mfrac に msqrt, mn, msqrt のリストの子がある。 +
    10. +
  10. + + mroot に 1 つの mn の子がある。 +
    11. +
  11. + + mfrac に 2 つの mn の子がある。 +
    12. +
  12. + + msqrt に 5 つの mn の子がある。 +
    13. +
  13. + + mroot に 2 つの mn の子がある。 +
    14. +
+

+ +

+

+ +

+ ``` ```css hidden @@ -257,7 +265,7 @@ checkboxes.forEach((checkbox) => { {{ EmbedLiveSample('Stretchy_radical_symbols', 700, 200, "", "") }} > [!WARNING] -> 伸縮を可能にするには、一般に特別な[数学フォント](/ja/docs/Web/MathML/Fonts)が必要です。前回の例は[ウェブフォント](/ja/docs/Learn/CSS/Styling_text/Web_fonts)を使用しています。 +> 伸縮を可能にするには、一般に特別な[数学フォント](/ja/docs/Web/MathML/Fonts)が必要です。前回の例は[ウェブフォント](/ja/docs/Learn_web_development/Core/Text_styling/Web_fonts)を使用しています。 ## 線のない分数 @@ -295,12 +303,12 @@ checkboxes.forEach((checkbox) => { ## まとめ -今回は ``、``、`` 要素を使用して分数と根号を作る方法を見てきました。これらの要素には、分数と根号という特別な機能があることがわかりました。また、 `linethickness` 属性を使用して、分数を棒なしで描画する方法も見てきました。次の記事では、基本的な数学の記法を続け、[添字](/ja/docs/Learn/MathML/First_steps/Scripts)について考えます。 - -{{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Text_containers", "Learn/MathML/First_steps/Scripts", "Learn/MathML/First_steps")}} +今回は ``、``、`` 要素を使用して分数と根号を作る方法を見てきました。これらの要素には、分数と根号という特別な機能があることがわかりました。また、 `linethickness` 属性を使用して、分数を棒なしで描画する方法も見てきました。次の記事では、基本的な数学の記法を続け、[添字](/ja/docs/Web/MathML/Guides/Scripts)について考えます。 ## 関連情報 - [`` 要素](/ja/docs/Web/MathML/Element/mfrac) - [`` 要素](/ja/docs/Web/MathML/Element/msqrt) - [`` 要素](/ja/docs/Web/MathML/Element/mroot) + +{{PreviousMenuNext("Web/MathML/Guides/Text_containers", "Web/MathML/Guides/Scripts", "Web/MathML/Guides")}} diff --git a/files/ja/web/mathml/guides/getting_started/index.md b/files/ja/web/mathml/guides/getting_started/index.md index cd2af612e32aca..3157829cfc0892 100644 --- a/files/ja/web/mathml/guides/getting_started/index.md +++ b/files/ja/web/mathml/guides/getting_started/index.md @@ -1,41 +1,15 @@ --- title: MathML を始めよう slug: Web/MathML/Guides/Getting_started -original_slug: Learn/MathML/First_steps/Getting_started l10n: - sourceCommit: 4bddde3e2b86234eb4594809082873fc5bf00ee3 + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- -{{LearnSidebar}}{{NextMenu("Learn/MathML/First_steps/Text_containers", "Learn/MathML/First_steps")}} +{{MathMLRef}} -この記事では、単純な HTML 文書を使い、そこに MathML 数式を追加する方法を、いくつかの要素を紹介しながら見ていきます。 +{{NextMenu("Web/MathML/Guides/Text_containers", "Web/MathML/Guides")}} - - - - - - - - - - - -
前提知識: - 基本的なソフトウェアがインストールされていること、 - ファイルでの作業に関する基本的な知識、 HTML の基本（ - HTML 入門を学ぶこと） -
目標: - MathML の基本構文と HTML ページへの組み込み方を理解すること。 -
+この記事では、単純な HTML 文書を使い、そこに MathML 数式を追加する方法を、いくつかの要素を紹介しながら見ていきます。 ## HTML に \ 要素で数式を挿入する @@ -196,9 +170,7 @@ MathML は HTML と同じ構文を用いて要素と属性のツリーを表し ## まとめ -この記事では、 HTML 文書内に数式を挿入するために `` 要素を使用する方法を見ていきました。 `display="block"` を使用する場合としない場合の `` 要素のレンダリングの違いについて学びました。さらに、他にもいくつかの MathML 要素に出会いました。分数を表す ``、グループ化を表す ``、そして最後にいくつかのテキスト要素です。これらの[テキストコンテナー](/ja/docs/Learn/MathML/First_steps/Text_containers)については次の記事で詳しく分析します。 - -{{LearnSidebar}}{{NextMenu("Learn/MathML/First_steps/Text_containers", "Learn/MathML/First_steps")}} +この記事では、 HTML 文書内に数式を挿入するために `` 要素を使用する方法を見ていきました。 `display="block"` を使用する場合としない場合の `` 要素のレンダリングの違いについて学びました。さらに、他にもいくつかの MathML 要素に出会いました。分数を表す ``、グループ化を表す ``、そして最後にいくつかのテキスト要素です。これらの[テキストコンテナー](/ja/docs/Web/MathML/Guides/Text_containers)については次の記事で詳しく分析します。 ## 関連情報 @@ -208,3 +180,5 @@ MathML は HTML と同じ構文を用いて要素と属性のツリーを表し - [`` 要素](/ja/docs/Web/MathML/Element/mrow) - [`math-style` プロパティ](/ja/docs/Web/CSS/math-style) - [`math-depth` プロパティ](/ja/docs/Web/CSS/math-depth) + +{{NextMenu("Web/MathML/Guides/Text_containers", "Web/MathML/Guides")}} diff --git a/files/ja/web/mathml/guides/scripts/index.md b/files/ja/web/mathml/guides/scripts/index.md index a4480c451ce66a..8387cac30b8785 100644 --- a/files/ja/web/mathml/guides/scripts/index.md +++ b/files/ja/web/mathml/guides/scripts/index.md @@ -1,45 +1,19 @@ --- title: MathML 添字要素 slug: Web/MathML/Guides/Scripts -original_slug: Learn/MathML/First_steps/Scripts l10n: - sourceCommit: 4bddde3e2b86234eb4594809082873fc5bf00ee3 + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Fractions_and_roots", "Learn/MathML/First_steps/Tables", "Learn/MathML/First_steps")}} +{{MathMLRef}} -基本的な数学記法の復習を続け、添字つきの MathML 要素の構築に焦点を当てます。 +{{PreviousMenuNext("Web/MathML/Guides/Fractions_and_roots", "Web/MathML/Guides/Tables", "Web/MathML/Guides")}} - - - - - - - - - - - -
前提知識: - 基本的なソフトウェアがインストールされていること、 - ファイルでの作業に関する基本的な知識、 HTML の基本（ - HTML 入門を学ぶこと） -
目標: - 添字要素を作成する基本的な MathML 要素に慣れること。 -
+基本的な数学記法の復習を続け、添字つきの MathML 要素の構築に焦点を当てます。 ## 下付き文字と上付き文字 -[前回の記事](/ja/docs/Learn/MathML/First_steps/Fractions_and_roots)で見たものと同様に、``、``、`` は、ちょうど 2 つの要素（``、``の場合）、または 3 つの要素（`` の場合）ガ指定された特別な構造があります。 +[前回の記事](/ja/docs/Web/MathML/Guides/Fractions_and_roots)で見たものと同様に、``、``、`` は、ちょうど 2 つの要素（``、``の場合）、または 3 つの要素（`` の場合）ガ指定された特別な構造があります。 ```html

@@ -149,7 +123,7 @@ document.getElementById("showSolution").addEventListener("click", () => { 以下のMathML式は、分数、根号、添字を入れ子にして、より複雑な式を格納しています。添字要素 ``, ``, ``, ``, ``, `` でレイアウトされた要素を推測してみてください。このような要素をクリックするたびに、その要素が強調表示され、確認メッセージが表示されます。最後に、 MathML のソースを読んで、それが予想と一致しているかどうかを確認してください。 -```html hidden +```html-nolint hidden @@ -172,8 +146,8 @@ document.getElementById("showSolution").addEventListener("click", () => { + - | + + | α → @@ -249,7 +223,7 @@ scriptedElements.forEach((scripted) => { }); document.getElementById("clearOutput").addEventListener("click", () => { clearHighlight(); - outputDiv.innerHTML = ""; + outputDiv.textContent = ""; }); ``` @@ -257,13 +231,13 @@ document.getElementById("clearOutput").addEventListener("click", () => { ## それ以外の演算子プロパティ -前回、いくつかの [`` 要素のプロパティ](/ja/docs/Learn/MathML/First_steps/Text_containers#operator_properties_of_mo)、すなわち縦方向の伸縮と空間について見てきました。これで添字要素が利用できるようになったので、このリストを拡張することができます。[前回の例](#アクティブラーニング_添字要素を認識する)を多少修正することで行います。 +前回、いくつかの [`` 要素のプロパティ](/ja/docs/Web/MathML/Guides/Text_containers#mo_の演算子プロパティ)、すなわち縦方向の伸縮と空間について見てきました。これで添字要素が利用できるようになったので、このリストを拡張することができます。[前回の例](#アクティブラーニング_添字要素を認識する)を多少修正することで行います。 ### 水平方向の伸長 -最初に β ≔ z 1 + z 2 と α ≔ v 1 + v 2 の置き換えを行ってみましょう。 +最初に β≔z1+z2\beta := z*{1} + z*{2} and α≔v1+v2\alpha := v*{1} + v*{2} の置き換えを行ってみましょう。 -```html hidden +```html-nolint hidden @@ -296,8 +270,8 @@ document.getElementById("clearOutput").addEventListener("click", () => { + - | + + | @@ -361,16 +335,16 @@ math { {{ EmbedLiveSample('Stretching_in_horizontal_direction', 700, 200, "", "") }} -これで、下カッコ "⎵" と右向き矢印 "→" は、置換された値の幅に応じて水平方向に伸びることがわかりました。 `` 内の伸縮しない兄弟の高さに応じて、[いくつかの縦方向の演算子は伸縮できる](/ja/docs/Learn/MathML/First_steps/Text_containers#active_learning_stretchy_operators) ことを思い出してください。同様に、いくつかの水平方向の演算子は ``、``、`` 要素内の伸縮しない兄弟の幅に応じて伸縮を行います。 +これで、下カッコ "⎵" と右向き矢印 "→" は、置換された値の幅に応じて水平方向に伸びることがわかりました。 `` 内の伸縮しない兄弟の高さに応じて、[いくつかの縦方向の演算子は伸縮できる](/ja/docs/Web/MathML/Guides/Text_containers#active_learning_stretchy_operators) ことを思い出してください。同様に、いくつかの水平方向の演算子は ``、``、`` 要素内の伸縮しない兄弟の幅に応じて伸縮を行います。 > [!NOTE] > 伸縮は ``、`` 、`` 要素のどの子要素に対しても、真下付き文字や真上付き文字に限らず行うことができます。 ### 大きな演算子と制限 -これまでの例では、 [`display="block"`](/ja/docs/Learn/MathML/First_steps/Getting_started#display_属性) 属性を使用しています。同じ例を、その属性なしで表示してみましょう。 +これまでの例では、 [`display="block"`](/ja/docs/Web/MathML/Guides/Getting_started#display_属性) 属性を使用しています。同じ例を、その属性なしで表示してみましょう。 -```html hidden +```html-nolint hidden @@ -403,8 +377,8 @@ math { + - | + + | @@ -478,9 +452,7 @@ math { ## まとめ -この記事では、下付き・上付き・真下付き・真上付き文字のための要素 ``、``、``、``、``、`` を紹介し、基本的なレイアウトの確認を完了しました。これらの要素を用いて、 `` 要素の新しい特性を簡単に紹介することができました。次の記事では、引き続き[表レイアウト](/ja/docs/Learn/MathML/First_steps/Tables)を取り上げます。 - -{{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Fractions_and_roots", "Learn/MathML/First_steps/Tables", "Learn/MathML/First_steps")}} +この記事では、下付き・上付き・真下付き・真上付き文字のための要素 ``、``、``、``、``、`` を紹介し、基本的なレイアウトの確認を完了しました。これらの要素を用いて、 `` 要素の新しい特性を簡単に紹介することができました。次の記事では、引き続き[表レイアウト](/ja/docs/Web/MathML/Guides/Tables)を取り上げます。 ## 関連情報 @@ -490,3 +462,5 @@ math { - [`` 要素](/ja/docs/Web/MathML/Element/munder) - [`` 要素](/ja/docs/Web/MathML/Element/mover) - [`` 要素](/ja/docs/Web/MathML/Element/munderover) + +{{PreviousMenuNext("Web/MathML/Guides/Fractions_and_roots", "Web/MathML/Guides/Tables", "Web/MathML/Guides")}} diff --git a/files/ja/web/mathml/guides/tables/index.md b/files/ja/web/mathml/guides/tables/index.md index 24c050f4c558d8..ff44b503880960 100644 --- a/files/ja/web/mathml/guides/tables/index.md +++ b/files/ja/web/mathml/guides/tables/index.md @@ -1,47 +1,19 @@ --- title: MathML 表 slug: Web/MathML/Guides/Tables -original_slug: Learn/MathML/First_steps/Tables l10n: - sourceCommit: 4bddde3e2b86234eb4594809082873fc5bf00ee3 + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Scripts", "Learn/MathML/First_steps/Three_famous_mathematical_formulas", "Learn/MathML/First_steps")}} +{{MathMLRef}} -基本的な数式表記がすべてわかったら、あとは行列のような式や他にも高度な数式レイアウトを使用することができる表形式レイアウトを考えることができます。 +{{PreviousMenuNext("Web/MathML/Guides/Scripts", "Web/MathML/Guides/Three_famous_mathematical_formulas", "Web/MathML/Guides")}} - - - - - - - - - - - -
前提知識: - 基本的なソフトウェアがインストールされていること、 - ファイルでの作業に関する基本的な知識、 HTML の基本（ - HTML 入門と HTML 表を学ぶこと） -
目標: - 添字要素を作成する基本的な MathML 要素に慣れること。 -
+基本的な数式表記がすべてわかったら、あとは行列のような式や他にも高度な数式レイアウトを使用することができる表形式レイアウトを考えることができます。 ## MathML 表形式要素 -MathML の表形式要素は [HTML 表](/ja/docs/Learn/HTML/Tables)要素と似ています。 `` 要素は数式の表を表し、子要素（行を表す）として `` 要素があり、それぞれの子要素（セルを表す）として `` 要素があります。 `` 要素は MathML の数式のどこにでも挿入することができます。 `` 要素は任意の数の MathML の子を格納することができ、それらを `` コンテナーとして並べます。 +MathML の表形式要素は [HTML 表](/ja/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics)要素と似ています。 `` 要素は数式の表を表し、子要素（行を表す）として `` 要素があり、それぞれの子要素（セルを表す）として `` 要素があります。 `` 要素は MathML の数式のどこにでも挿入することができます。 `` 要素は任意の数の MathML の子を格納することができ、それらを `` コンテナーとして並べます。 表は通常、（ベクトルを含む）行列のような表現に使用します。 [CSS の `matrix()` 関数に関する記事](/ja/docs/Web/CSS/transform-function/matrix)から引用した基本的な例を示します。 @@ -128,11 +100,11 @@ MathML の表形式要素は [HTML 表](/ja/docs/Learn/HTML/Tables)要素と似 ## セルを複数の行や列にまたがらせる -これも [HTML の表](/ja/docs/Learn/HTML/Tables/Basics#allowing_cells_to_span_multiple_rows_and_columns)に似ています。 `` 要素は `columnspan` 属性と `rowspan` 属性を受け入れ、セルが複数の行と列にまたがることを示します。下記は内側の行列が外側の行列の 2 列にまたがっています。 +これも [HTML の表](/ja/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics#セルを複数の行や列で結合できるようにする)に似ています。 `` 要素は `columnspan` 属性と `rowspan` 属性を受け入れ、セルが複数の行と列にまたがることを示します。下記は内側の行列が外側の行列の 2 列にまたがっています。 ```html hidden - + columnspan のある行列 @@ -224,7 +196,7 @@ MathML の表形式要素は [HTML 表](/ja/docs/Learn/HTML/Tables)要素と似 ```html hidden - + My first matrix @@ -304,13 +276,13 @@ MathML の表形式要素は [HTML 表](/ja/docs/Learn/HTML/Tables)要素と似 この記事では、テーブル用の HTML 要素に相当する ``、``、`` 要素について確認しました。行列のようなオブジェクトを表すために使用する方法や、高度なレイアウトのために使用する方法について見てきました。 -このモジュールはまもなく完了します。あと 1 つだけ指定されたことがあります。[三大有名数式の評価](/ja/docs/Learn/MathML/First_steps/Three_famous_mathematical_formulas)では、新しい知識を使用して HTML と MathML を使用して小さな数学の記事を書き直します。 - -{{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Scripts", "Learn/MathML/First_steps/Three_famous_mathematical_formulas", "Learn/MathML/First_steps")}} +このモジュールはまもなく完了します。あと 1 つだけ指定されたことがあります。[三大有名数式の評価](/ja/docs/Web/MathML/Guides/Three_famous_mathematical_formulas)では、新しい知識を使用して HTML と MathML を使用して小さな数学の記事を書き直します。 ## 関連情報 -- [HTML テーブルについての学習](/ja/docs/Learn/HTML/Tables) +- [HTML テーブルについての学習](/ja/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics) - [`` 要素](/ja/docs/Web/MathML/Element/mtable) - [`` 要素](/ja/docs/Web/MathML/Element/mtr) - [`` 要素](/ja/docs/Web/MathML/Element/mtd) + +{{PreviousMenuNext("Web/MathML/Guides/Scripts", "Web/MathML/Guides/Three_famous_mathematical_formulas", "Web/MathML/Guides")}} diff --git a/files/ja/web/mathml/guides/text_containers/index.md b/files/ja/web/mathml/guides/text_containers/index.md index f5a04105c8672b..2b9a4318ded4ea 100644 --- a/files/ja/web/mathml/guides/text_containers/index.md +++ b/files/ja/web/mathml/guides/text_containers/index.md @@ -1,47 +1,21 @@ --- title: MathML テキストコンテナー slug: Web/MathML/Guides/Text_containers -original_slug: Learn/MathML/First_steps/Text_containers l10n: - sourceCommit: 4bddde3e2b86234eb4594809082873fc5bf00ee3 + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Getting_started", "Learn/MathML/First_steps/Fractions_and_roots", "Learn/MathML/First_steps")}} +{{MathMLRef}} -これで MathML の概要を理解していただけたと思いますので、次は MathML 数式の構成要素として使用するテキストコンテナー（変数、数値、演算子...）に焦点を移します。 +{{PreviousMenuNext("Web/MathML/Guides/Getting_started", "Web/MathML/Guides/Fractions_and_roots", "Web/MathML/Guides")}} - - - - - - - - - - - -
前提知識: - 基本的なソフトウェアがインストールされていること - ファイルでの作業に関する基本的な知識、 HTML の基本（ - HTML 入門を学ぶこと）、テキストのスタイル付けのための CSS 記法（基本的なテキストとフォントのスタイル設定およびウェブフォントを読んでください）。 -
目標: - テキストを書くために使用する MathML 要素に慣れ、特別な動作に気づくこと。 -
+これで MathML の概要を理解していただけたと思いますので、次は MathML 数式の構成要素として使用するテキストコンテナー（変数、数値、演算子...）に焦点を移します。 ## 数式のための Unicode 文字 -数式には多くの特殊文字が含まれます。例えば、ギリシャ文字（例: Δ）、フラクター文字（例: 𝔄）、二重打文字（例: ℂ）、二項演算子（例: ≠）、矢印（例: ⇒）、積分記号（例: ∮）、和記号 (例: ∑), 論理記号 (例: ↪Ps∀), 柵 (例: ↪Ps_230A) など。ウィキペディアの記事[Unicodeにおける数学演算子と記号](https://en.wikipedia.org/wiki/Mathematical_operators_and_symbols_in_Unicode)は、使用する文字の概要を提供しています。 +数式には多くの特殊文字が含まれます。例えば、ギリシャ文字（例: Δ）、フラクター文字（例: 𝔄）、二重打文字（例: ℂ）、二項演算子（例: ≠）、矢印（例: ⇒）、積分記号（例: ∮）、和記号 (例: ∑), 論理記号 (例: ↪Ps∀), 柵 (例: ↪Ps_230A) など。ウィキペディアの記事 [Unicode における数学演算子と記号](https://en.wikipedia.org/wiki/Mathematical_operators_and_symbols_in_Unicode)は、使用する文字の概要を提供しています。 -これらの文字のほとんどは基本ラテン語 Unicode ブロックに属しませんので、[文書の文字エンコーディング](/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#html_文書の文字コードを指定する)を指定し、適切なウェブフォントで提供することをお勧めします。以下は UTF-8 エンコーディング方式と[ラテン語の現行の数学](/ja/docs/Web/MathML/Fonts#fonts_with_a_math_table)フォントを使用する基本的なテンプレートです。 +これらの文字のほとんどは基本ラテン語 Unicode ブロックに属しませんので、[文書の文字エンコーディング](/ja/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata#html_文書の文字コードを指定する)を指定し、適切なウェブフォントで提供することをお勧めします。以下は UTF-8 エンコーディング方式と [Latin Modern Math](/ja/docs/Web/MathML/Fonts#math_表を含むフォント) フォントを使用する基本的なテンプレートです。 ```html @@ -61,12 +35,12 @@ l10n: {{ EmbedLiveSample('Unicode_characters_for_mathematics', 700, 100, "", "") }} -## 少し意味づけ +## ちょっとした意味づけ -[MathML を始めるには](/ja/docs/Learn/MathML/First_steps/Getting_started)の記事で、 MathML の数式中のテキストは `` や `` のような固有のコンテナー要素に包まれていることに注目しました。より一般的には、 MathML 数式のすべてのテキストはトークン要素と呼ばれるコンテナーの中に記載しなければなりません。さらに、 MathML ではテキストコンテンツの様々な意味を判別するために、複数のトークン要素を指定しています。 +[MathML を始めよう](/ja/docs/Web/MathML/Guides/Getting_started)の記事で、 MathML の数式中のテキストは `` や `` のような固有のコンテナー要素に包まれていることに注目しました。より一般的には、 MathML 数式のすべてのテキストはトークン要素と呼ばれるコンテナーの中に記載しなければなりません。さらに、 MathML ではテキストコンテンツの様々な意味を判別するために、複数のトークン要素を指定しています。 - `` 要素は「識別子」を表します。この「識別子」は記号でも任意のテキストでもかまいません。例えば、`x` （変数）、`cos` （関数名）、`π`（記号定数）などです。 -- ``要素は「数値リテラル」、または数値リテラルとして表示されるべき他のデータを表します。例えば、`2` （整数）、 `0.123` （10 進数）、 `0xFFEF` （16 進数値）などです。 +- `` 要素は「数値リテラル」、または数値リテラルとして表示されるべき他のデータを表します。例えば、`2` （整数）、 `0.123` （10 進数）、 `0xFFEF` （16 進数値）などです。 - `` 要素は演算子、または演算子として表示されるべき何らかのものを表します。例えば、 `+` （二項演算子）、 `≤` （二項関係演算子）、 `∑` （和記号）、 `[` （フェンス）などです。 - `` 要素は任意のテキストを表すために使用します。例えば `if` や `maps to` のような数式中の短い単語です。 @@ -139,7 +113,7 @@ tokenElements.forEach((token) => { }); document.getElementById("clearOutput").addEventListener("click", () => { clearHighlight(); - outputDiv.innerHTML = ""; + outputDiv.textContent = ""; }); ``` @@ -172,7 +146,7 @@ document.getElementById("clearOutput").addEventListener("click", () => { ## \ の自動的なイタリック化 -数学における組版上の慣例として、変数にはイタリック体を使用する慣例があります。そのために、単一の文字を持つ `` 要素は自動的にイタリック体として表示されます。これはラテン文字とギリシャ文字のすべてについて当てはまります。以下の式の 2 つの `` 要素のレンダリングを見比べてください： +数学における組版上の慣例として、変数にはイタリック体を使用する慣例があります。そのために、単一の文字を持つ `` 要素は自動的にイタリック体として表示されます。これはラテン文字とギリシャ文字のすべてについて当てはまります。以下の式の 2 つの `` 要素のレンダリングを見比べてください。 ```html @@ -417,7 +391,7 @@ tokenElements.forEach((token) => { }); document.getElementById("clearOutput").addEventListener("click", () => { clearHighlight(); - outputDiv.innerHTML = ""; + outputDiv.textContent = ""; }); ``` @@ -461,13 +435,11 @@ document.getElementById("clearOutput").addEventListener("click", () => { ``` > [!WARNING] -> 伸縮できるようにするには、一般に特別な[数学フォント](/ja/docs/Web/MathML/Fonts)が要求されます。前回の例は[ウェブフォント](/ja/docs/Learn/CSS/Styling_text/Web_fonts)に頼っています。 +> 伸縮できるようにするには、一般に特別な[数学フォント](/ja/docs/Web/MathML/Fonts)が要求されます。上記の例は[ウェブフォント](/ja/docs/Learn_web_development/Core/Text_styling/Web_fonts)に頼っています。 ## まとめ -この記事では、テキストコンテナーとして使用されるいくつかのトークン要素とその意味付け、すなわち `` （識別子）、 `` （数値）、 `` （演算子）、 `` （汎用テキスト）について学びました。ここまで、数式でよく使われる特殊な Unicode 文字を見て、 `` と `` 要素の監視できる動作の概要を述べてきました。次の記事では、トークン要素によって[分数と根号](/ja/docs/Learn/MathML/First_steps/Fractions_and_roots)のような複雑な式を作る方法を見ていきます。 - -{{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Getting_started", "Learn/MathML/First_steps/Fractions_and_roots", "Learn/MathML/First_steps")}} +この記事では、テキストコンテナーとして使用されるいくつかのトークン要素とその意味付け、すなわち `` （識別子）、 `` （数値）、 `` （演算子）、 `` （汎用テキスト）について学びました。ここまで、数式でよく使われる特殊な Unicode 文字を見て、 `` と `` 要素の監視できる動作の概要を述べてきました。次の記事では、トークン要素によって[分数と根号](/ja/docs/Web/MathML/Guides/Fractions_and_roots)のような複雑な式を作る方法を見ていきます。 ## 関連情報 @@ -475,3 +447,5 @@ document.getElementById("clearOutput").addEventListener("click", () => { - [`` 要素](/ja/docs/Web/MathML/Element/mn) - [`` 要素](/ja/docs/Web/MathML/Element/mo) - [`` 要素](/ja/docs/Web/MathML/Element/mtext) + +{{PreviousMenuNext("Web/MathML/Guides/Getting_started", "Web/MathML/Guides/Fractions_and_roots", "Web/MathML/Guides")}} diff --git a/files/ja/web/mathml/guides/three_famous_mathematical_formulas/index.md b/files/ja/web/mathml/guides/three_famous_mathematical_formulas/index.md index 94fd3aa6218bf2..5839a2ab5d3329 100644 --- a/files/ja/web/mathml/guides/three_famous_mathematical_formulas/index.md +++ b/files/ja/web/mathml/guides/three_famous_mathematical_formulas/index.md @@ -1,30 +1,15 @@ --- -title: 三大数式 +title: "課題: 三大数式" slug: Web/MathML/Guides/Three_famous_mathematical_formulas -original_slug: Learn/MathML/First_steps/Three_famous_mathematical_formulas l10n: - sourceCommit: 5fe849524a16c019b6ac201b0d9bcc65f7bc9bc8 + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- -{{LearnSidebar}}{{PreviousMenu("Learn/MathML/First_steps/Tables", "Learn/MathML/First_steps")}} - - - - - - - - - - - - -
前提知識: - この評価に挑戦する前に、すでにこのモジュールのすべての記事を読み終えていて、 - HTML の基礎 (HTML 入門) も理解している必要があります。 -
目標:MathML を利用して遊び、新しく得た知識を試すこと。
+{{MathMLRef}} + +{{PreviousMenu("Web/MathML/Guides/Tables", "Web/MathML/Guides")}} + +この記事で指定されたいくつかの記事で学んだことを活用すれば、すでに相対的に洗練された MathML 数式を書くことができるはずです。この課題は、それを実行するチャンスです。 ## 小さな数学の記事 @@ -86,7 +71,7 @@ using the following expression: \end{document} ``` -## 開始点 +## 出発点 この評価を始めるには、いつもの HTML テンプレートに従ってください。既定では UTF-8 エンコード方式を用い、 `` タグと `` タグには特別なウェブフォントを使用しています（LaTeX 出力と同じような外見になります）。目標は疑問符 `???` を実際の MathML コンテンツに置き換えることです。 @@ -127,7 +112,7 @@ using the following expression: - 高度な構造（分数？根号？添字？行列？）を見ていき、それぞれに使用する適切な MathML 要素を決定します。 - 部分式のグループ化には `` を使用することを忘れないでください。 - 伸縮性のある演算子や大きな演算子に注意してください！ -- [W3C Validator](https://validator.w3.org/nu/) を使用して、 HTML/MathML マークアップの意図しない間違いを見つけてください。 -- もし行き詰まったり、手作業で MathML を書くのが苦痛に感じたりした場合は、 [TeXZilla](https://fred-wang.github.io/TeXZilla/) のような [MathML を書く](/ja/docs/Web/MathML/Authoring)ためのツールを使用することもできます。 +- [W3C validator](https://validator.w3.org/nu/) を使用して、 HTML/MathML マークアップの意図しない間違いを見つけてください。 +- もし行き詰まったり、手作業で MathML を書くのが苦痛に感じたりした場合は、 [MathML を書く](/ja/docs/Web/MathML/Authoring)ためのツール、たとえば [TeXZilla](https://fred-wang.github.io/TeXZilla/) など使用することもできます。 -{{LearnSidebar}}{{PreviousMenu("Learn/MathML/First_steps/Tables", "Learn/MathML/First_steps")}} +{{PreviousMenu("Web/MathML/Guides/Tables", "Web/MathML/Guides")}}