Marpの特徴

Marp (Markdown Presentation Ecosystem) は、マークダウン記法でプレゼンテーションスライドを作成できるツールです。

シンプル - マークダウンで書くだけ
カスタマイズ - CSSでテーマを自由に変更
レスポンシブ - あらゆるデバイスに対応
高速 - 軽量で快適な編集体験

スライドの作成

---
marp: true
theme: default
---

# タイトル

内容をここに書きます

---

# 次のスライド

別のスライドの内容

--- でスライドを区切ります

テキストの装飾

見出し

# 見出し1
## 見出し2
### 見出し3

強調

• 太字 **太字**
• 斜体 *斜体*
• コード `コード`

リストと表

リスト

• 項目1
• 項目2
  • サブ項目

表

画像の挿入

![画像の説明](image.png)

<!-- 背景画像 -->
![bg](background.jpg)

<!-- サイズ指定 -->
![w:500](image.png)

bg, w:, h: などの指定が可能

レイアウトの調整

2カラムレイアウト

<div class="columns">
<div>

左側の内容

</div>
<div>

右側の内容

</div>
</div>

数式の表示

MathJaxを使用して数式を表示できます：

$$
E = mc^2
$$

テーマの適用

---
marp: true
theme: your-theme
---

CSSファイルを作成してスタイルをカスタマイズ

スライドクラス

<!-- _class: lead -->
# センター寄せ

<!-- _class: invert -->
# 反転スタイル

lead, invert などの組み込みクラス

様々な形式で出力

• HTML - Web表示用
• PDF - 印刷・配布用
• PNG - 画像として保存
• PowerPoint - PPTXファイル

marp slide.md --pdf
marp slide.md --html

効果的なスライド作成

1スライド1メッセージ
情報を整理して伝える

視覚的な工夫
図表や画像を活用

読みやすさ
適切なフォントサイズと十分な余白

VSCodeでの開発

拡張機能: Marp for VS Code

• リアルタイムプレビュー
• シンタックスハイライト
• 自動補完

.vscode/settings.jsonでプロジェクト設定

まとめ

Marpで効率的なプレゼンテーション作成

• マークダウンの簡単さ
• 豊富なカスタマイズ
• 多彩な出力形式
• 開発者フレンドリー

Let's create beautiful slides with Marp!