Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
HTMLで分数をどう表示する?MathMLの紹介と使い方
Search
kouki.miura
September 23, 2025
Programming
0
33
HTMLで分数をどう表示する?MathMLの紹介と使い方
HTMLで分数を表示するMathMLの説明。
kouki.miura
September 23, 2025
Tweet
Share
More Decks by kouki.miura
See All by kouki.miura
ビルトインウェブサーバーでPHP開発
koukimiura
0
21
生成AI × 仕様駆動開発 ~Kiroで見えた業務アプリ開発の未来~
koukimiura
0
56
Flutterで分数(Fraction)を表示する方法
koukimiura
0
140
ゲームとかの最初に使い方を教えてくれるアレ
koukimiura
0
51
Claude Codeでゲーム開発デビュー
koukimiura
0
130
Vite+TypeScript+Vue.jsではじめるフロントエンドプロジェクト
koukimiura
1
74
リソース制限環境下でのローカルLLM構築術
koukimiura
0
120
フロントエンドのパフォーマンスチューニング
koukimiura
7
2.6k
医療系ソフトウェアのAI駆動開発
koukimiura
1
260
Other Decks in Programming
See All in Programming
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
560
NIKKEI Tech Talk#38
cipepser
0
240
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
430
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
640
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
2
380
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
650
iOSでSVG画像を扱う
kishikawakatsumi
0
170
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
1
130
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
110
One Enishi After Another
snoozer05
PRO
0
160
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
430
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Code Reviewing Like a Champion
maltzj
526
40k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Statistics for Hackers
jakevdp
799
220k
Side Projects
sachag
455
43k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Thoughts on Productivity
jonyablonski
70
4.9k
Navigating Team Friction
lara
190
15k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Raft: Consensus for Rubyists
vanstee
140
7.2k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Transcript
HTMLで分数をどう表示する? - MathMLの紹介と使い方 - 2025.09.23 函館本線沿線勉強会-HNSAdev-@小樽3号車 三浦 恒樹 (MIURA KOUKI)
診療情報管理士 上級医療情報技師 医用画像情報専門技師 ドゥウェル株式会社
長男が飼っている ハリネズミがアイコン INTRODUCE ・ドゥウェル株式会社 (医療系IT開発・導入会社)に所属 ・マネージャー(プレイング・マネージャー) ・TypeScript, Vue.js, Node.js, Java,C#,
PHP ・3児の父 ・休日は子どものサッカー観戦 ・参加している勉強会 札幌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で分数をどう表示する? 案1.諦めて横に表示する 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&モバイル用ブラウザで表示できる ・専用のライブラリ等は必要ない(非対応ブラウザをサポートする場合は必要) ご清聴ありがとうございました。 まとめ