HTMLで分数をどう表示する？MathMLの紹介と使い方

HTMLで分数をどう表示する？ - MathMLの紹介と使い方 - 2025.09.23 函館本線沿線勉強会-HNSAdev-@小樽3号車三浦恒樹 (MIURA KOUKI)
診療情報管理士上級医療情報技師医用画像情報専門技師ドゥウェル株式会社

長男が飼っているハリネズミがアイコン INTRODUCE ・ドゥウェル株式会社（医療系IT開発・導入会社）に所属・マネージャー（プレイング・マネージャー）・TypeScript, Vue.js, Node.js, Java，C#,
PHP ・３児の父・休日は子どものサッカー観戦・参加している勉強会　札幌PHP勉強会、JBUG札幌、JavaDO、ゆるWeb勉強会、えびてく、　クラメソ札幌IT勉強会(仮)、AWS初心者LT会in札幌、　札幌すごいAI会、札幌IT石狩鍋、函館本線沿線勉強会　　等

・HTMLで分数をどう表示する？・MathMLとは・MathMLの使い方・アプリでの分数表示・まとめ INDEX

HTMLで分数をどう表示する？ https://www.mext.go.jp/content/20211102-mxt_kyoiku02-100002607_04.pdf 文部科学省の「小学校学習指導要領」によると、分数は小学校2年生から学習し始める。 →小学校2年生以上向けの教育アプリ（ドリル　アプリ等）の画面で分数を表示するには　どうすれば良いか？個人で開発中の小学生向け算数ドリルアプリ。整数・小数・加減乗除算は表示
できるが、分数はHTMLで表示できない。

HTMLで分数をどう表示する？案１．諦めて横に表示する HTMLはシンプルだが、教科書に出てくる表記と異なる。

HTMLで分数をどう表示する？案2．CSSで縦に並べる独自マークアップ(クラス名)で再利用性が低い

MathMLとは CSSは無くても表示されるが、見た目を整えることもできる。

MathMLとは https://developer.mozilla.org/ja/docs/Web/MathML/Reference/Element/mfrac Chrome、Edge、Chrome Android、WebView Androidは109(2023年1月) Safari、Safari on iOS、WebView on iOSは5.1または5(2011年)から対応。

MathMLの使い方 https://developer.mozilla.org/ja/docs/Web/MathML/Tutorials/For_beginners/Getting_started Edge on Win Chrome on Win Safari on
iOS

MathMLの使い方標本分散の公式

アプリでの分数表示

・MathML（Mathematical Markup Language）で、HTML内で分数等の数式を表示できる・MathMLは2023年1月以降、一般的なPC＆モバイル用ブラウザで表示できる・専用のライブラリ等は必要ない（非対応ブラウザをサポートする場合は必要）ご清聴ありがとうございました。まとめ

HTMLで分数をどう表示する？MathMLの紹介と使い方

HTMLで分数をどう表示する？MathMLの紹介と使い方

kouki.miura

More Decks by kouki.miura

Other Decks in Programming

Featured

Transcript