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
480
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
450
聴覚障害と音声情報処理
fujiemon
0
360
聴こえに依らず_ワイワイ発言しつつガシガシ開発する_ために必要なこと-スクフェス福岡.pdf
fujiemon
0
1.6k
Other Decks in Design
See All in Design
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
110
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
340
ランドマークが光る!季節を彩るナビ体験 - Mobility Night #3 -
kitau
0
110
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
630
Cyber Heart Online Book
hjnasby
0
160
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
220
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
130
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
240
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
0
210
株式会社バクタム 会社説明資料
bactum
0
290
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
250
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
600
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
The Pragmatic Product Professional
lauravandoore
36
6.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Unsuck your backbone
ammeep
671
58k
RailsConf 2023
tenderlove
30
1.2k
BBQ
matthewcrist
89
9.8k
GitHub's CSS Performance
jonrohan
1031
460k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
890
Gamification - CAS2011
davidbonilla
81
5.4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
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