Marpで学ぶCSS/HTML

この発表は 「Marpで学ぶHTML/CSS」 をテーマに、Markdownでスライドが作れるツール Marp の特徴を紹介したものです。

Think ! FrontEnd by DMM #8
https://dmm.connpass.com/event/366793/

Transcript

1. Think Frontend #8 合同会社DMM.com 戦略開発本部 平良昂也 Think Frontend #8 1 / 17 Marp で学ぶHTML/CSS
2. Think Frontend #8 2 / 17 自己紹介 合同会社DMM.com （2025 新卒） 戦略開発本部 DMMTV 開発部 Web アプリケーション開発グループ DMM TV のバグ修正をしている 平良 昂也(@__ayanoYuki__)
3. Markdown でスライドを作れるツール Think Frontend #8 3 / 17 Marp とは Git 管理・自動化できる エディタだけで作れる 生成AI と相性が良い
4. ツール 入力 学習コスト テーマ Marp MD 低 ◦ ( シンプル) Reveal.js MD/HTML 中 ◎ ( 豊富) Slidev MD(Vue) 中〜高 ◎ ( 自由度高) Pandoc+Beamer MD/TeX 高 △ (LaTeX 依存) Think Frontend #8 4 / 17 他サービスとの比較
5. Marp はMarkdown なので、HTML/CSS が使える！ 技術 役割・用途 Markdown 基本的なレイアウトを設定する CSS スライドのデザインを設定する HTML 細かなレイアウトを設定する Think Frontend #8 5 / 17 HTML/CSS 次第でデザインが無限大
6. Think Frontend #8 6 / 17 HTML/CSS の腕試し・練習に使えそう
7. デフォルトのテーマ＋Markdown only では、デザイン・レイアウトに限界がある FE なら、いつものスライドと同じデザインは作れるのでは？ Think Frontend #8 7 / 17 HTML/CSS の腕試し・練習に使えそう
8. 合同会社DMM.com のスライドの表紙を作ってみたので、解説します！ Think Frontend #8 8 / 17 スライドを作ってみよう！
9. Think Frontend #8 9 / 17
10. Think Frontend #8 10 / 17
11. Think Frontend #8 11 / 17
12. Think Frontend #8 12 / 17
13. Think Frontend #8 13 / 17
14. パワーポイント形式の出力が弱い （出力後の編集は不要で見た目をそのままでPPTX 出力がしたい） 基本の出力形式がPDF, HTML だけしかない .pptx の出力をするには、設定が必要 出力した.pptx の編集は出来るが、デザインをそのまま再現できない Marp v4.1.0 から出来るようになった フォントの設定だったり、配置が崩れたり... Think Frontend #8 14 / 17 ハマりどころ
15. PDF 形式で出力し、pdf2pptx をする 1. Marp でスライドをPDF 出力する 2. PDF をページ毎の写真にして、PPTX に貼る 3. PPTX を出力する CI/CD やスクリプトで自動化すれば実用的 Think Frontend #8 15 / 17 解決策・工夫
16. Marp はMarkdown ベース で手軽にスライドが作れる HTML/CSS を駆使すればデザイン自由度は高く、腕試しにも最適 課題はPPTX 出力の弱さ → PDF 変換 + 自動化で実用可能 他サービスと比較しても、学習コストが低く導入しやすいのが強み 「軽く作りたい」 「コードで管理したい」なら Marp が最適！ Marp でHTML/CSS の腕試し（パワポ芸）をやってみよう Think Frontend #8 16 / 17 まとめ
17. Think Frontend #8 17 / 17