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
570
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
460
聴覚障害と音声情報処理
fujiemon
0
360
聴こえに依らず_ワイワイ発言しつつガシガシ開発する_ために必要なこと-スクフェス福岡.pdf
fujiemon
0
1.6k
Other Decks in Design
See All in Design
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
870
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
800
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
540
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
400
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
550
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.7k
アクセシビリティに取り組むメリット
magi1125
2
240
株式会社バクタム 会社説明資料
bactum
0
330
freee + Product Design FY25Q4
freee
4
16k
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
160
Installing and Running decksh/pdfdeck
ajstarks
1
840
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
280
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7.1k
Fireside Chat
paigeccino
39
3.6k
Into the Great Unknown - MozCon
thekraken
40
2k
Writing Fast Ruby
sferik
628
62k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Site-Speed That Sticks
csswizardry
10
810
Rails Girls Zürich Keynote
gr2m
95
14k
A Tale of Four Properties
chriscoyier
160
23k
A Modern Web Designer's Workflow
chriscoyier
696
190k
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