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
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
Search
ふじえもん
July 12, 2025
Design
0
400
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
Marpを使いスライドを書いてみました.ただ書くだけだと面白くないので推しのCSSを作っています.
ふじえもん
July 12, 2025
Tweet
Share
More Decks by ふじえもん
See All by ふじえもん
学生としてRSGT2024に参加して得られた学び / Lessons learned from participating in RSGT2024 as a student
fujiemon
0
440
聴覚障害と音声情報処理
fujiemon
0
340
聴こえに依らず_ワイワイ発言しつつガシガシ開発する_ために必要なこと-スクフェス福岡.pdf
fujiemon
0
1.5k
Other Decks in Design
See All in Design
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
340
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
260
株式会社バクタム 会社説明資料
bactum
0
270
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
9.9k
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.6k
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
120
Memory Man v3 (WIP)
storybychad
PRO
0
2.3k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
220
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1.1k
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
150
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
400
Goodpatch Tour💙 / We are hiring!
goodpatch
31
870k
Featured
See All Featured
Side Projects
sachag
455
43k
Building an army of robots
kneath
306
45k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Rails Girls Zürich Keynote
gr2m
95
14k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
860
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Statistics for Hackers
jakevdp
799
220k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
We Have a Design System, Now What?
morganepeng
53
7.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Transcript
Marp で推しCSS スライドを作ろう! fujiemon ※この記事ではMarp の環境構築やカスタムテーマの設定については触れません. Marp で推しCSS スライドを作ろう! Qiita
記事 20250712 1
カラーパレットと用途 変数名 用途例 色コード --accent-color アクセント・強調 #a09bd8 --accent-sub-color インラインコード等 #21c4dc
--main-text 本文・見出し #223366 --bg-main セクション背景 #fbfaf3 --bg-sub サブ背景・コード等 #e5e5ea --border-color 表枠線 #21c4dc Marp で推しCSS スライドを作ろう! Qiita 記事 20250712 2
見出し・リスト・強調 h1 見出し(下線がアクセントカラーに!) h2 見出し(左線がアクセントカラーに!) テキスト色は落ち着いた色のmain-text に. 箇条書きのMarker( の・のこと) の色はaccent-color
に. 1. 番号付きリスト 2. strong 太字,em 斜体 Marp で推しCSS スライドを作ろう! Qiita 記事 20250712 3
コードブロック・インラインコード インラインコード例: inline-code 推し keyword // サンプルコード function hello(name) {
console.log("Hello, " + name + "!"); } Marp で推しCSS スライドを作ろう! Qiita 記事 20250712 4
表と引用 表 見出し1 見出し2 セルA セルB セルC セルD 引用 これは引用のサンプルです.h1
の下線とh2 の左線はアクセントカラーです. Marp で推しCSS スライドを作ろう! Qiita 記事 20250712 5
header ・footer カスタマイズ header は自分のアイコン画像をデフォルト背景に footer にはイベントやコミュニティのアイコンも入れられる 例 footer: '<img
src="./image/hoge.png" height="24" style="vertical- align:middle;">イベント名 開催日' Marp で推しCSS スライドを作ろう! Qiita 記事 20250712 6
Marp の魅力と「楽さ」 Markdown で書けるから,テキスト中心の編集がとても速い! コードや表,リストも「書く→ すぐプレビュー」で直感的 バージョン管理(Git )やコラボも簡単 テーマやカスタムCSS で「自分らしい」デザインもすぐ反映
PowerPoint よりも「手軽に・再利用しやすく」スライドが作れる! Marp で推しCSS スライドを作ろう! Qiita 記事 20250712 7
まとめ 推しCSS テーマでMarp スライドがもっと楽しく! カラーパレットや要素ごとの見た目を自由に調整しよう! Qiita 記事や発表資料にぜひどうぞ! Marp で楽に楽しくメッセージを表現しよう! 公式ドキュメントも見てね!
Marp で推しCSS スライドを作ろう! Qiita 記事 20250712 8