2026/04/29

Marp for VS Code

# Marp for VS Code クイックチートシート

Marp for VS Code を使って Markdown からスライドを作成する際の  
**よく使う記法・調整方法をまとめたチートシート**です。

---

## Front Matter(基本設定)

Front Matter は **省略可能** ですが、  
テーマ指定やページ番号表示などを行う場合に使用します。

    ---
    marp: true          # Marpを有効化(VS Code拡張では省略可能)
    theme: default      # テーマ(default / gaia / uncover)
    paginate: true      # ページ番号を表示
    header: "タイトル"  # ヘッダー(任意)
    footer: "フッター"  # フッター(任意)
    ---

---

## 改ページと表示制御(Marp使用時)

    ---     # 通常の改ページ

    ___     # ヘッダー・フッター・ページ番号を非表示にして改ページ

---

## 文字配置・簡易レイアウト

Marp では HTML を使用できます。

**中央寄せ**

    <div style="text-align:center">
    中央揃えテキスト
    </div>

---

## 画像の扱い(Marp拡張)

**サイズ指定**

    ![width:400px](image.png)

**複数画像の横並び**

    ![](a.pngbg](image.png)

**背景画像+明るさ調整**

    ![bg brightness:0.6](image.png)

---

## スライド全体の余白を調整

スライド外周の余白を減らし、表示領域を広げます。

    <style scoped>
    section {
      padding: 30px;
    }
    </style>

---

## 表のサイズ・視認性調整

表がスライドからはみ出る場合の定番設定。

    <style scoped>
    table {
      font-size: 60%;
    }
    table th,
    table td {
      padding: 4px 8px;
    }
    </style>

---

## 個別スライド専用スタイル(Marp)

特定のスライドでのみ CSS を適用したい場合に使用します。

    <style scoped>
    h1 {
      color: #0066cc;
    }
    </style>

---

## その他のオプション例

**スライドサイズ指定(16:9)**

    ---
    size: 16:9
    ---

※ Front Matter 内に記述

---

## 参考リンク

- Marp 公式  
  https://marp.app

- Marp for VS Code  
  https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode

0 件のコメント:

コメントを投稿

人気の投稿