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
620
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
470
聴覚障害と音声情報処理
fujiemon
0
370
聴こえに依らず_ワイワイ発言しつつガシガシ開発する_ために必要なこと-スクフェス福岡.pdf
fujiemon
0
1.6k
Other Decks in Design
See All in Design
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
210
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.4k
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
bitkey
PRO
0
140
CMS管理画面のアクセシビリティ
magi1125
8
2.5k
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1.1k
アクセシビリティに取り組むメリット
magi1125
2
250
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
680
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
300
mento Design Team Portfolio
mento0fficial
1
820
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.5k
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
260
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
540
Featured
See All Featured
A designer walks into a library…
pauljervisheath
208
24k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Making Projects Easy
brettharned
118
6.4k
Why Our Code Smells
bkeepers
PRO
339
57k
Navigating Team Friction
lara
189
15k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Typedesign – Prime Four
hannesfritz
42
2.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Building an army of robots
kneath
306
46k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
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