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
740
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
510
聴覚障害と音声情報処理
fujiemon
0
390
聴こえに依らず_ワイワイ発言しつつガシガシ開発する_ために必要なこと-スクフェス福岡.pdf
fujiemon
0
1.6k
Other Decks in Design
See All in Design
Liquid GlassとApp Intents
touyou
0
500
What makes a great Director?
_limex_
0
340
Franks Myth
gfht1
0
110
DESIGNEAST 2025 A-3
_kotobuki_
0
110
【MIXI MEETUP!ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏:デザイナーが語るプロダクト誕生秘話
mixi_design
PRO
0
160
7 Core Values of Round-L
wired888
0
2.4k
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
340
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
600
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
tame
0
310
Yumika Yamada Portfolio
yumii
0
2.3k
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
620
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
210
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
1
30
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Code Review Best Practice
trishagee
72
19k
Into the Great Unknown - MozCon
thekraken
40
2.2k
RailsConf 2023
tenderlove
30
1.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.8k
Build your cross-platform service in a week with App Engine
jlugia
234
18k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.1k
The Language of Interfaces
destraynor
162
25k
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