Markdownでおしゃれスライドを作る！VS Code拡張機能「Marp」の使い方を徹底解説

2025.07.08

Markdownだけで美しいスライドを簡単に作れる「Marp（マープ）」をご存知ですか？
今回の記事では、VS Codeの拡張機能「Marp for VS Code」を使ったスライド作成の流れを初心者向けに解説します。

  • Marpって何？
  • どうやって使うの？
  • どんなスライドが作れる？
    を学べる内容です。

完成品（内容はチェックしていません。デザイン確認用です。）
https://yamaichige.shop/Marp/marp_basic_slides.html

Marpとは？

Marpは「Markdown Presentation Ecosystem」の略で、
Markdownファイルからスライド資料を作れるオープンソースツールです。

主な特徴は以下のとおりです。

✅ Markdownだけで完結
✅ テーマを簡単に変更できる
✅ HTMLやPDFとしてエクスポートできる
✅ プレビューを見ながら編集できる

開発ドキュメント:
Marp公式ドキュメント

VS CodeとMarp拡張機能の準備

1. VS Codeをインストール

まだインストールしていない場合は、公式サイトから入手してください。

👉 Visual Studio Code公式サイト

2. Marp拡張機能をインストール

  1. VS Codeを起動
  2. サイドバーの「拡張機能（四角いアイコン）」をクリック
  3. 検索欄に Marp for VS Code と入力
  4. 「インストール」をクリック

インストール後は、Markdownファイルを開くと自動でMarpモードを利用できます。

Markdownでスライドを作成する基本

Marpでは「—」でページを区切ります。

📄 サンプル

sample.mdというファイルを新規作成し、内容は以下を書いて保存します。

# タイトルスライド
Marpを使ったスライド

---

## セカンドスライド
- 箇条書き1
- 箇条書き2

---

## サードスライド
**太字**や*斜体*もMarkdownで書けます。

これだけで3ページのスライドが作成できます。

💡 よく使う記法

  • # 見出し
  • --- ページ区切り
  • - 箇条書き
  • **太字**
  • *斜体*
  • 画像: ![代替テキスト](画像URL)

プレビューとテーマ設定

プレビューの表示

Markdownファイル(例：sample.md)を開き、
右上の「Markdown Preview Enhanced:Open preview to side」をクリックすると、スライドプレビューが表示されます。
しかし、右下にワーニング「Markdown preview provided by VS Code」が出るので、それをクリックすると新しいタブが立ち上がりスライドプレビューが表示されます。
こちらを使ってください。最初に表示されるほうはテーマを変更しても変わりません。

編集内容はリアルタイムで反映されます。

テーマの切り替え

スライド最上部にmarp: trueを記載し、テーマを指定できます。

例:

---
marp: true
theme: gaia
---

主なテーマ:

  • default
  • gaia
  • uncover

カスタマイズ例

背景やロゴも簡単に設定できます。

スライド背景を変更する

<!-- _backgroundColor: #004466 -->

➡︎ 背景を深いブルーに

背景画像を設定

---
marp: true
backgroundImage: url('背景画像のURL')
---

テキスト位置調整

<!-- _class: lead -->

※leadクラスを使うとテキストが中央寄せされます。
Marpが「このスライドには lead というクラスを付与する」と解釈し、テーマに合わせて特別なレイアウト（大きな文字サイズや中央寄せなど）を適用します。
これはHTMLコメントのように見えます。
ですが、**Marpでは「コメントの中に特殊なメタ情報を書いてスライドに反映する仕組み」**を持っています。

🖨️ PDFやHTMLに出力する

作成したスライドは簡単に出力できます。

  1. プレビュー画面を閉じて右上にある三角形のアイコンShow Quick Pick Of Marp Commandsをクリックします。
  2. Export Slide Deckをクリックする。
  3. ファイル名とファイルの種類を選択してExportをクリックします。

💡 さらに便利な機能

  • <!-- _footer: テキスト -->でフッターに文字を入れる
  • <!-- _paginate: true -->でページ番号を表示

🎨 カスタムCSS・テーマ作成で自分だけのスライドを作ろう

Marpは標準テーマでも十分きれいなスライドが作れますが、自分のブランドカラーや好みに合わせたテーマを作ることもできます。

💡 方法1: Markdownファイル上でCSSを指定

Markdownの先頭Front Matterでstyleを記述できます。

---
marp: true
style: |
  section {
    font-family: "Segoe UI", sans-serif;
    color: #222;
  }
  h1 {
    color: #0055aa;
  }
---
# カスタムテーマスライド

💡 方法2: VS Codeの設定でCSSを指定

参考：https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode#use-custom-theme-css

フォルダ名が marp（任意） の場合、そこにワークスペースを作成し、Marp用のカスタムテーマCSSを設定する手順をわかりやすく解説します 🎨💻
最終的に以下のディレクトリ構成になります。

marp
├── .vscode
│   └── settings.json
├── sample.md
│   
└── themes
    └── your-theme.css

🧰 ステップ1：VS Codeでワークスペースを開く

  1. VS Codeを起動
  2. メニューから「ファイル → フォルダーを開く…」を選択
  3. marpフォルダを選択して開く

👉 これで marp フォルダがワークスペースとして開かれます

🗂 ステップ2：テーマCSSファイルを配置する

  1. marp フォルダの中に themes フォルダを作成（任意の名前でもOK）
  2. その中に your-theme.css のようなファイルを作成
    例: marp/themes/your-theme.css
/* @theme your-theme */
@import 'default';
section {
  background: rgb(153, 255, 248);
}

✍️ @import 'default'; を使うことで、既存のMarpテーマをベースにカスタマイズできます

⚙️ ステップ3：.vscode/settings.json にテーマを登録

  1. marp フォルダ内に .vscode フォルダを作成
  2. その中に settings.json を作成して、以下のように記述：
{
  "markdown.marp.themes": [
    "./themes/your-theme.css"
  ]
}

これでMarpがカスタムテーマCSSを認識できるようになります

🪄 ステップ4：Markdownファイルでテーマを使う

以下のようにMarkdownファイルの先頭に記述します：

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

# スライドタイトル
スライドの内容…

🎯 theme: your-theme で、CSSファイル内の @theme your-theme が適用されます

💡補足ポイント
  • CSSファイルを編集するとMarkdownプレビューに即反映されます 🔄
  • テーマ名はCSS内の @theme に一致させる必要があります

Claudeでスライドを作ってもらってCursorで修正

基本がわかったら、AIに依頼したほうが楽です。ただ、思い通りのものを作るのは至難の業。
依頼したプロンプト

以下のディレクトリでmarpを使っています。
marp
├── .vscode
│ 　　　└── settings.json
├── sample.md
└── themes
         └── your-theme.css
おしゃれなスライドを作りたい。
内容はmarpの基本の説明

ファイル名やテーマ名は修正した。
marp_basic_slides.mdとmarp_custom_theme.cssをダウンロード

settings.json

{
  "markdown.marp.themes": [
    "./themes/your-theme.css",
    "./themes/marp_custom_theme.css"
  ]
}

marp_basic_slides.mdのスライド最上部

---
marp: true
theme: marp_custom_theme
class: lead
paginate: true
backgroundColor: #fff
math: katex   # 軽量、高速
---

ただし、問題があるのでpdfで出力しアップロードして修正依頼
「pdfで出力しました。何か所か、下の方が切れているスライドがあります。まとめは、消えているところが多いです。」
なかなか治らず、そうこうしてるうちに無料枠を使い切った。
今度はCursorで修正。
完成したものをhtmlで出力した。
（書いてある内容に関してはチェックしてません。デザインの評価として見てください。）
https://yamaichige.shop/Marp/marp_basic_slides.html

所感

MarpというよりAIについていつも思うこと。
この記事もベースはChatGptを使って書いた。
Marpのコード修正もそうだが、AIは自分で実行しないで回答する件に関しては、かなり信頼性が低い。
記事を書くうえではVSCodeの設定に関するところは、よく間違う。
Marpのスライド修正に関してもVSCodeのsetting.jsonをものすごく修正をすすめてきた。多分関係ないし、そのままやったらハマると思った。

ということ使う上でのポイントは
・マークダウンとCSSの基本的な知識
・AIを使う場合は、PDFでフィードバックも使える。
・CSS（テーマ）をうまく作ること。
テーマがうまく作れて固定のものができれば、文章に集中できるのでいいかもしれません。

タイトルとURLをコピーしました