最近Marpを使ってスライドを作っています．
IDE上でテキストの編集をしてスライドを作れるのがとても楽なのでハマっています．
折角なら自分の好みの装飾でスライドを書きたいと思い，いろいろいじってみたので紹介します．
できたスライドは👇から見れます．説明もだいたいここに書いたのでこの記事ではこれ以上書きません．
Markdownのサンプルコードを折り畳みで置いておきます．トグルになっているので押したら折り畳みが解除されて全文を見れます
---
marp: true
theme: fujiemon
paginate: true
header: 'Marpで推しCSSスライドを作ろう！'
footer: 'Qiita記事 20250712'
---
# Marpで推しCSSスライドを作ろう！
<span class="right">**fujiemon**</span>
※この記事ではMarpの環境構築やカスタムテーマの設定については触れません．
---
## カラーパレットと用途
| 変数名 | 用途例 | 色コード |
|-----------------------|----------------------|--------------|
| --accent-color | アクセント・強調 | #a09bd8 |
| --accent-sub-color | インラインコード等 | #21c4dc |
| --main-text | 本文・見出し | #223366 |
| --bg-main | セクション背景 | #fbfaf3 |
| --bg-sub | サブ背景・コード等 | #e5e5ea |
| --border-color | 表枠線 | #21c4dc |
---
## 見出し・リスト・強調
# h1見出し（下線がアクセントカラーに！）
## h2見出し（左線がアクセントカラーに！）
- テキスト色は落ち着いた色のmain-textに．
- 箇条書きのMarker(:point_left:の・のこと)の色はaccent-colorに．
1. 番号付きリスト
2. **strong 太字**，*em 斜体*
---
## コードブロック・インラインコード
インラインコード例：`inline-code` `推し` `keyword`
~~~js
// サンプルコード
function hello(name) {
console.log("Hello, " + name + "!");
}
~~~
---
## 表と引用
### 表
| 見出し1 | 見出し2 |
|---------|---------|
| セルA | セルB |
| セルC | セルD |
### 引用
> これは**引用**のサンプルです．h1の下線とh2の左線はアクセントカラーです．
---
## header・footerカスタマイズ
- headerは自分のアイコン画像をデフォルト背景に
- footerにはイベントやコミュニティのアイコンも入れられる
- 例 `footer: '<img src="./image/hoge.png" height="24" style="vertical-align:middle;">イベント名 開催日'`
---
## Marpの魅力と「楽さ」
- **Markdownで書ける**から，テキスト中心の編集がとても速い！
- コードや表，リストも「書く→すぐプレビュー」で直感的
- **バージョン管理（Git）**や**コラボ**も簡単
- テーマやカスタムCSSで「自分らしい」デザインもすぐ反映
- PowerPointよりも「手軽に・再利用しやすく」スライドが作れる！
---
## まとめ
- 推しCSSテーマでMarpスライドがもっと楽しく！
- カラーパレットや要素ごとの見た目を自由に調整しよう！
- Qiita記事や発表資料にぜひどうぞ！
- Marpで楽に**楽しく**メッセージを表現しよう！
- [公式ドキュメント](https://marp.app/)も見てね！
CSSのサンプルコードを折り畳みで置いておきます．トグルになっているので押したら折り畳みが解除されて全文を見れます
/* @theme fujiemon */
@import 'default';
/* --- ベースカラー設定 --- */
:root {
--accent-color: #a09bd8;
--accent-sub-color: #21c4dc;
--main-text: #223366;
--bg-main: #fbfaf3;
--bg-sub: #e5e5ea;
--border-color: #21c4dc;
}
/* --- セクション全体 --- */
section {
color: var(--main-text);
background: var(--bg-main);
padding: 2rem;
border-radius: 0.5rem;
box-shadow: 0 4px 16px 0 rgba(160,155,216,0.04);
}
/* --- タイトル・見出し --- */
h1, h2, h3, h4, h5, h6 {
color: var(--main-text);
font-weight: 700;
letter-spacing: 0.02em;
}
h1 {
border-bottom: 4px solid var(--accent-color);
padding-bottom: 0.3em;
margin-bottom: 0.8em;
}
h2 {
border-left: 6px solid var(--accent-color);
padding-left: 0.5em;
margin-top: 1.5em;
margin-bottom: 0.6em;
}
/* --- 強調・アクセント --- */
strong, em{
color: var(--accent-color);
background: none;
font-weight: 700;
}
/* --- 箇条書き・リスト --- */
ul, ol {
color: var(--main-text);
border-radius: 0.3em;
padding: 0.7em 1em;
margin-bottom: 1em;
}
li::marker {
color: var(--accent-color);
}
/* 箇条書きリストの点の色 */
ul li::marker {
color: var(--accent-color);
}
/* 数字リストの数字の色 */
ol li::marker {
color: var(--accent-color);
}
/* --- 表・テーブル --- */
table {
border-collapse: collapse;
background: var(--bg-sub);
color: var(--main-text);
margin: 1em 0;
border-radius: 0.3em;
overflow: hidden;
}
th, td {
border: 1px solid var(--border-color);
padding: 0.5em 1em;
}
th {
background: var(--accent-color);
color: #fff;
}
/* --- ヘッダー・フッター --- */
header, footer {
position: absolute;
color: var(--main-text);
font-size: 0.6em;
font-weight: 700;
letter-spacing: 0.05em;
}
/* header専用のスタイル */
header {
top: 20px;
left: 20px;
background-image: var(--headerImage, url("./image/fujiemon.png"));
background-repeat: no-repeat;
background-size: contain;
background-position: left center;
padding-left: 2em;
}
/* footer専用のスタイル */
footer {
bottom: 20px;
left: 20px;
text-align: right;
opacity: 0.7;
background-image: var(--footerImage);
background-repeat: no-repeat;
background-size: contain;
background-position: left center;
padding-left: 2em;
}
/* header内の画像をテキストと高さ揃え */
header img {
height: 1em;
vertical-align: middle;
}
/* footer内の画像をテキストと高さ揃え */
footer img {
height: 1em;
vertical-align: middle;
}
/* --- 引用・ボックス --- */
blockquote {
border-left: 6px solid var(--accent-color);
background: var(--bg-sub);
color: var(--main-text);
padding: 0.8em 1.5em;
margin: 1em 0;
font-style: italic;
}
/* --- コードブロック --- */
code, pre {
background: var(--bg-sub);
color: var(--main-text);
border-radius: 0.3em;
padding: 0.2em 0.4em;
font-size: 0.95em;
}
/* インラインコード専用の色 */
code {
color: var(--accent-sub-color);
background: var(--bg-sub);
}
/* --- 画像の丸みと影 --- */
img {
border-radius: 0.5em;
box-shadow: 0 2px 8px 0 rgba(160,155,216,0.10);
max-width: 90%;
margin: 0.5em 0;
}
/* --- スライド番号のカスタマイズ --- */
footer {
text-align: right;
opacity: 0.7;
}
/* --- テキストの配置 --- */
.right {
display: block;
text-align: right;
width: 100%;
}
以上！CSSをカスタマイズして推しCSSを作ろう！