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
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
700
デザイナー向けフライル説明資料
toshiblues
0
100
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
0
210
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
530
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
290
Them Middle School Kids Pitch
stevie_vee
0
110
sachi_y_portfolio
sachi337
0
470
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
150
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
110
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
360
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
150
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
2k
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
We Have a Design System, Now What?
morganepeng
53
7.7k
Adopting Sorbet at Scale
ufuk
77
9.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Agile that works and the tools we love
rasmusluckow
329
21k
Docker and Python
trallard
45
3.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Become a Pro
speakerdeck
PRO
29
5.5k
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