Marpで推しCSSスライドを作ろう！ / marp-with-favorite-css

Marpを使いスライドを書いてみました．ただ書くだけだと面白くないので推しのCSSを作っています．

Transcript

1. Marp で推しCSS スライドを作ろう！ fujiemon ※この記事ではMarp の環境構築やカスタムテーマの設定については触れません． Marp で推しCSS スライドを作ろう！ Qiita 記事 20250712 1
2. カラーパレットと用途 変数名 用途例 色コード --accent-color アクセント・強調 #a09bd8 --accent-sub-color インラインコード等 #21c4dc --main-text 本文・見出し #223366 --bg-main セクション背景 #fbfaf3 --bg-sub サブ背景・コード等 #e5e5ea --border-color 表枠線 #21c4dc Marp で推しCSS スライドを作ろう！ Qiita 記事 20250712 2
3. 見出し・リスト・強調 h1 見出し（下線がアクセントカラーに！） h2 見出し（左線がアクセントカラーに！） テキスト色は落ち着いた色のmain-text に． 箇条書きのMarker( の・のこと) の色はaccent-color に． 1. 番号付きリスト 2. strong 太字，em 斜体 Marp で推しCSS スライドを作ろう！ Qiita 記事 20250712 3
4. コードブロック・インラインコード インラインコード例： inline-code 推し keyword // サンプルコード function hello(name) { console.log("Hello, " + name + "!"); } Marp で推しCSS スライドを作ろう！ Qiita 記事 20250712 4
5. 表と引用 表 見出し1 見出し2 セルA セルB セルC セルD 引用 これは引用のサンプルです．h1 の下線とh2 の左線はアクセントカラーです． Marp で推しCSS スライドを作ろう！ Qiita 記事 20250712 5
6. header ・footer カスタマイズ header は自分のアイコン画像をデフォルト背景に footer にはイベントやコミュニティのアイコンも入れられる 例 footer: '<img src="./image/hoge.png" height="24" style="vertical- align:middle;">イベント名 開催日' Marp で推しCSS スライドを作ろう！ Qiita 記事 20250712 6
7. Marp の魅力と「楽さ」 Markdown で書けるから，テキスト中心の編集がとても速い！ コードや表，リストも「書く→ すぐプレビュー」で直感的 バージョン管理（Git ）やコラボも簡単 テーマやカスタムCSS で「自分らしい」デザインもすぐ反映 PowerPoint よりも「手軽に・再利用しやすく」スライドが作れる！ Marp で推しCSS スライドを作ろう！ Qiita 記事 20250712 7
8. まとめ 推しCSS テーマでMarp スライドがもっと楽しく！ カラーパレットや要素ごとの見た目を自由に調整しよう！ Qiita 記事や発表資料にぜひどうぞ！ Marp で楽に楽しくメッセージを表現しよう！ 公式ドキュメントも見てね！ Marp で推しCSS スライドを作ろう！ Qiita 記事 20250712 8