creating-marp-slides

name	creating-marp-slides
description	このプロジェクトでの Marp スライド作成ルール。スライド作成、画像配置、ビルド、プレビュー時に使用。画像は slides/images/ に配置、bun run preview/build を使用。

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 では期待通りに動作しない場合あり。

詳細リファレンス

• トラブルシューティング
• コンテンツ最適化