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
27
HTMLで分数をどう表示する?MathMLの紹介と使い方
HTMLで分数を表示するMathMLの説明。
kouki.miura
September 23, 2025
Tweet
Share
More Decks by kouki.miura
See All by kouki.miura
ゲームとかの最初に使い方を教えてくれるアレ
koukimiura
0
41
Claude Codeでゲーム開発デビュー
koukimiura
0
110
Vite+TypeScript+Vue.jsではじめるフロントエンドプロジェクト
koukimiura
1
58
リソース制限環境下でのローカルLLM構築術
koukimiura
0
110
フロントエンドのパフォーマンスチューニング
koukimiura
7
2.6k
医療系ソフトウェアのAI駆動開発
koukimiura
1
240
レポートから見る生成AIを活用したシステム開発.
koukimiura
0
170
AWSサービスの整理と使いたい機能の概要
koukimiura
1
94
生成AIによる PHP = Node.js 変換の検証
koukimiura
0
190
Other Decks in Programming
See All in Programming
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
3
920
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
7
1.3k
Serena MCPのすすめ
wadakatu
4
800
実践AIチャットボットUI実装入門
syumai
7
2.3k
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
630
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
2.2k
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
2.4k
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
2
1.1k
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.8k
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
11k
生成AIを活用した初学者向けPython講座
soogie
1
130
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
140
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Docker and Python
trallard
46
3.6k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
KATA
mclloyd
32
14k
The Invisible Side of Design
smashingmag
301
51k
Code Review Best Practice
trishagee
72
19k
RailsConf 2023
tenderlove
30
1.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Agile that works and the tools we love
rasmusluckow
330
21k
How to train your dragon (web standard)
notwaldorf
96
6.2k
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&モバイル用ブラウザで表示できる ・専用のライブラリ等は必要ない(非対応ブラウザをサポートする場合は必要) ご清聴ありがとうございました。 まとめ