Marp スライド作成スキル

本プロジェクトにおける Marp スライド作成の固有ルールと設定。

画像配置（重要）

スライドで使用する画像は 必ず slides/images/ に配置。

![](./images/diagram.png)
![bg right:40%](./images/photo.jpg)

理由: Marp CLI サーバーモードはルート以下のみ配信。他の場所では CLI プレビューで表示されない。参考: GitHub Issue #163

ファイル配置

| 種類 | パス | |------|------| | スライド | slides/*.md | | 画像 | slides/images/ | | カスタムテーマ | themes/*.css | | 出力 | dist/ |

開発コマンド

# プレビュー（ルートから実行）
bun run preview
# → http://localhost:8080/slides/[ファイル名].md

# ビルド
bun run build        # HTML + PDF
bun run build:html   # HTML のみ
bun run build:pdf    # PDF のみ
bun run build:pptx   # PPTX のみ

設定（.marprc.yml）

allowLocalFiles: true  # ローカル画像読み込み許可
themeSet: ./themes     # カスタムテーマディレクトリ
html: true             # HTML タグ許可

その他のオプション（inputDir, output 等）については Marp CLI 公式ドキュメントを参照。

Front Matter 必須設定

---
marp: true
theme: default  # または gaia, uncover
paginate: true  # 推奨
---

テーマ選択

default: ビジネス向け、シンプル
gaia: カラフル、視覚的
uncover: ミニマル、テキスト中心

注意: invert クラスは default テーマで最も安定。gaia では期待通りに動作しない場合あり。

creating-marp-slides