Marpとは・使い方｜MarkdownからPDF・PPTXを出す手順と実測

Marp は、Markdown を読んで各スライドの HTML と CSS を作り、PDF・PPTX・画像はブラウザ（Chrome・Edge・Firefox）に描画させて作ります。ブラウザが要るのは、この「描画して保存する」工程のためです。

flowchart TD
    M[slides.md<br>Markdown] --> C[Marp CLI / VS Code<br>Marpit＋Marp Core]
    C --> H[HTML<br>ブラウザで発表]
    C --> B[Chrome 等で描画]
    B --> P[PDF]
    B --> X[PPTX]
    B --> I[PNG]

よく調べられることの答えを先にまとめます。

確認環境：Ubuntu 24.04 の上で、Node.js 22.23.4・npm 10.9.9 を使い、作業用フォルダーに npm install @marp-team/marp-cli で Marp CLI 4.5.1（Marp Core 4.4.0・Marpit 同梱）を入れました。PDF・PPTX・PNG の変換は、この環境にある Chromium（Google Chrome for Testing 153.0.8010.12）を環境変数 CHROME_PATH で指定して行い、編集できる PPTX は LibreOffice 24.2.7 で確かめました。13枚と100枚の Markdown を HTML・PDF・PPTX・PNG に変換し、ページ数は pdfinfo と PPTX の中身（ZIP）、所要時間は time とシェルの経過時間で測りました。日本語フォントは pdffonts で PDF に埋め込まれたフォント名を読んでいます。VS Code の拡張機能の操作と設定項目は Marp for VS Code の公式 README、ディレクティブと画像の構文は Marpit と Marp Core の公式ドキュメントで確かめました。図は mermaid 11 で描画を確かめています（確認日 2026年10月29日）。

Marpとは（Markdownでスライドを作る仕組み）

この節では、Marp が何で、どんな部品からできていて、何が得意で何が苦手かが分かります。

Marp（Markdown Presentation Ecosystem）は、Markdown で書いた文章をスライドに変換するオープンソースのツール群です。文章を書く感覚でスライドを作れるため、技術勉強会・社内共有・講義資料のように「文字と図とコードが中心で、見た目は統一されていればよい」資料に向いています。Marp という名前は、次の3つの部品の総称です。

変換の土台は Marpit（マーピット）という小さなフレームワークで、Markdown を「1スライド＝1つの <section>」の HTML と、そのための CSS に変換します。Marp Core はその上に、3つの組み込みテーマ（default・gaia・uncover）、数式（MathJax・KaTeX）、絵文字、コードブロックの自動縮小を載せたものです。VS Code 拡張と CLI は、どちらも Marp Core を呼んでいます。

Marpの使い方は3通り（VS Code・CLI・Web）

最初の1本は Marp for VS Code、変換の自動化は Marp CLI が定番です。どちらも書く内容（Markdown）は同じで、変えるのは「どこで変換するか」だけです。

1. 1Marp for VS Code（まず試す）拡張機能を入れ、.md を開いてプレビュー。右上のアイコンから PDF・PPTX・HTML に書き出す。PDF などの書き出しには PC にブラウザが要る
2. 2Marp CLI（自動化・複数ファイル）npx @marp-team/marp-cli@latest slides.md --pdf。GitHub Actions などで push のたびに PDF を作れる。この記事の実測はこちら
3. 3Marp Web（公式サイトのお試し）インストールせずにブラウザ上で試せる。公式サイトのデモ用で、本番の資料づくりは 1 か 2 で行う

CLI の入れ方は4通りあり、公式ドキュメントでは Node.js 18 以降での npx・npm、Homebrew（brew install marp-cli）、Scoop（scoop install marp）、単体の実行ファイル、Docker イメージ（marpteam/marp-cli）が案内されています。npm の使い方は、関連記事「npm コマンド 一覧｜package.json 書き方と実行結果・npm 12対応」で扱っています。

Marp CLIのインストールと最初の変換（実行結果）

この節では、Marp CLI を npm で入れてから、最初の Markdown を HTML にするまでの手順と、実際の出力が分かります。

npm で入れて、marp ファイル名.md と打つだけで HTML ができます。手元ではインストールに13.5秒、155パッケージ・約135MB でした（内訳の多くは PDF 変換で使うブラウザ制御ライブラリです）。

最初の変換の出力はこうでした。

$ npx marp slides.md -o out/slides.html
[  INFO ] Converting 1 markdown...
[  INFO ] slides.md => out/slides.html

real    0m3.152s    （初回。2回目以降は 0.7 秒前後）

ブラウザが見つからない環境で --pdf を付けると、次のエラーで止まります。この環境では Chrome のインストール先が標準の場所でないため、環境変数 CHROME_PATH で実行ファイルを指定して通しました（--browser-path オプションでも同じです）。

$ npx marp slides.md --pdf -o out/slides.pdf
[  INFO ] Converting 1 markdown...
[ ERROR ] Failed converting Markdown. (No suitable browser found. Please ensure
          one of the following browsers is installed: chrome, edge, firefox)

$ CHROME_PATH=/opt/pw-browsers/chromium-1243/chrome-linux64/chrome npx marp slides.md --pdf -o out/slides.pdf
[  INFO ] Converting 1 markdown...
[  INFO ] slides.md => out/slides.pdf

Markdownの書き方（front-matter・区切り・見出し）

この節では、Marp 用の Markdown に最低限必要な書き方と、この記事で変換に使った13枚の実物の一部が分かります。

Markdown の先頭に marp: true を書き、スライドの境目に --- を置きます。それ以外は普通の Markdown（見出し・箇条書き・表・コード・画像）です。Markdown の記法そのものは、関連記事「Markdownの書き方一覧｜記法早見表と環境別の対応・変換結果つき」で扱っています。

---
marp: true
theme: default
lang: ja
size: 16:9
paginate: true
header: "社内勉強会 2026-10"
footer: "© 2026 サンプル"
---

<!-- _paginate: false -->
<!-- _header: "" -->
<!-- _footer: "" -->

# Marpで作るスライド

Markdown だけで、HTML・PDF・PPTX を出す

---

## 箇条書きと強調

- **太字**と *斜体*
- `inline code`
  - 入れ子の箇条書き

1. 番号付き
2. リスト

---

## 表と引用

| 形式 | 出力コマンド |
|---|---|
| HTML | `marp slides.md` |
| PDF | `marp slides.md --pdf` |

> Markdown の表は、そのままスライドの表になります。

変換された HTML の中身を見ると、1枚目の <section> には front-matter の値がそのまま属性になっていました。paginate の値が data-marpit-pagination="2"（ページ番号）と data-marpit-pagination-total="13"（総ページ数）になり、テーマの CSS がこれを使ってページ番号を描きます。

<section id="2" data-paginate="true" data-header="社内勉強会 2026-10"
  data-footer="© 2026 サンプル" data-theme="default" lang="ja"
  data-marpit-pagination="2" data-marpit-pagination-total="13" data-size="16:9">

見出しごとに自動で区切りたいときは、グローバルディレクティブ headingDivider: 2 を書くと、## 以上の見出しが出るたびに新しいスライドになります。手元では --- を1つも書かない3つの見出しの Markdown が3枚のスライドになりました。

出力形式の実物（HTML・PDF・PPTX・PNGの枚数・サイズ・所要時間）

この節では、同じ Markdown を4つの形式に変換したときの、枚数・ファイルサイズ・所要時間の実測が分かります。

13枚のスライド（画像3枚・コード・数式・表を含む）を変換した結果です。HTML だけがブラウザ不要で、他の3つは Chromium を起動して描画しています。

100枚の方は、各ページに箇条書き3つとコードブロック1つを置いた同じ構成です。PDF が13枚より速いのは、画像と数式が無いためです。PPTX は「ページを画像にして貼る」形式なので、枚数に比例して大きく、遅くなります。--image-scale 1 を付けると貼る画像が 1280×720 になり、13枚の PPTX は 1.17MB から 562KB に減りました。

PDF に埋め込まれたフォントと、PPTX の中身はこうでした。PPTX は ZIP なので Python で開いて確かめています。

$ pdfinfo out/slides.pdf | grep -i "pages\|page size"
Pages:           13
Page size:       960 x 540 pts

$ python3 -c "import zipfile; z=zipfile.ZipFile('out/slides.pptx'); ..."
13 slides, 13 media  (ppt/media/Slide-1-image-1.png ... 2560x1440)
text in slide2: []          ← 文字が図形として入っていない（画像）

編集できるPPTX（--pptx-editable）

通常の PPTX は、PowerPoint で開いても文字を直せません。Marp CLI には実験的な --pptx-editable があり、ブラウザに加えて LibreOffice Impress が入っていれば、文字や図形を編集できる PPTX を作ります。手元（LibreOffice 24.2.7）では13枚が 56KB になり、2枚目のスライドの XML に「箇条書きと強調」「太字」などの文字がテキストとして入っていました。公式は「再現性は通常の PPTX より低く、発表者ノートは入らない」と注意しています。

$ npx marp slides.md --pptx --pptx-editable --allow-local-files -o out/editable.pptx
[  WARN ] [EXPERIMENTAL] Converting to editable PPTX is experimental feature.
          The output depends on LibreOffice and slide reproducibility is not
          fully guaranteed.
[  INFO ] slides.md => out/editable.pptx

ed.pptx: 13 slides, 7 media, text in slide2: ['箇条書きと強調', '太字', 'と', ' ', '斜体', 'inline code']

ディレクティブ一覧（theme・paginate・size・header・footer・class）

この節では、front-matter や HTML コメントに書く「ディレクティブ」の種類と、全体用・ページ用・1ページだけ用の違いが分かります。

ディレクティブは、front-matter か <!-- --> のコメントに YAML で書く設定です。全体に効く「グローバル」、そのページ以降に効く「ローカル」、先頭に _ を付けて1ページだけに効く「スポット」の3種類があります。

ローカルディレクティブは「書いたページから後ろ全部」に効きます。表紙だけページ番号を消すなら <!-- _paginate: false -->、途中から番号を出すなら、そのページに <!-- paginate: true --> と書きます。手元の13枚では、表紙に _paginate・_header・_footer を空にするスポットディレクティブを置き、2枚目以降だけ番号とヘッダーが出ることを PNG で確かめました。paginate: hold は「番号は表示するが増やさない」、skip は「表示せず増やさない」で、目次や区切りのページに使います。

画像の配置（サイズ指定・bg・左右分割・複数背景・フィルター）

この節では、画像の大きさの決め方、背景にする書き方、画像と文章を左右に並べる書き方が分かります。

画像は Markdown の ![代替文](パス) の「代替文」の位置にキーワードを書いて制御します。Marpit の公式ドキュメントにある構文を、13枚の中で実際に描画したものが次の表です。

左右分割の描画結果は、左 40% の幅いっぱいに画像が入り、右側に見出しと箇条書きが縦中央で置かれました。ヘッダー・フッター・ページ番号は右側の領域の中に収まります。画像を「本文の中」に置くか「背景」に置くかの使い分けはこうです。

2カラムレイアウトの作り方（CSSのcolumnsとGrid）

この節では、Markdown だけではできない2カラムを、テーマ CSS の2通りで作った実物が分かります。

Marp の Markdown に2カラムの構文はありません。画像と文章なら bg left で済みますが、「左に手順・右に結果」のように文章同士を並べるときは、CSS で作ります。手元で2通り描画して、どちらも左右に分かれることを PNG で確かめました。

1. CSS の columns（HTML を書かない）

そのページに _class: cols を付け、テーマ CSS で columns: 2 を当てます。2つ目の ### 見出しから右の段に移るよう break-before: column を指定しています。Markdown は普通の見出しと箇条書きだけです。

<!-- _class: cols -->

## 2カラム（CSS の columns）

### 左の見出し

- 手順 1
- 手順 2

### 右の見出し

- 結果 A
- 結果 B

/* テーマ CSS に追加 */
section.cols { columns: 2; column-gap: 40px; }
section.cols h2 { column-span: all; }
section.cols h3:nth-of-type(2) { break-before: column; }

2. CSS Grid（HTML のブロックで分ける）

左右に入れる内容を class="col" を付けた HTML のブロック要素で囲み、テーマ CSS で section を display: grid; grid-template-columns: 1fr 1fr にする方法です。Marp Core の既定の許可リストに div と class 属性が入っているため、--html を付けなくても描画されました。ブロックの開始タグと閉じタグの前後に空行を入れないと、中の Markdown が解釈されない点に注意します。Grid の書き方は、関連記事「CSS Gridの使い方｜repeat・fr・minmaxとコピペ用レイアウト集」で扱っています。

section.two-col { display: grid; grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr; column-gap: 40px; }
section.two-col h2 { grid-column: 1 / 3; }
section.two-col .col { padding: 0 10px; }

どちらを選ぶかは、「Markdown を素のままにしたい」なら 1、「左右の幅や余白を細かく決めたい」なら 2 です。

コードブロック・数式（MathJax／KaTeX）・絵文字の実物

この節では、コード・数式・絵文字がどう描画されるかと、ネットワークが無いときの違いが分かります。

コードブロックは言語名を付けると色分けされ、スライドの幅からはみ出すと自動で縮小されます。Marp Core の「auto-scaling」で、組み込みテーマではコードブロックと数式ブロックが対象です。変換後の HTML では <pre is="marp-pre" data-auto-scaling="downscale-only"> という形になっていました。

## 数式（MathJax が既定）

二次方程式の解の公式：

$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$

インラインの数式 $E = mc^2$ も書けます。

絵文字は、ネットワークに出られない環境で PNG に変換したところ、画像の読み込みに失敗した印と OS のフォントの絵文字が並んで表示されました。オフラインで変換する資料では、絵文字を使わないか、Unicode のまま表示する設定（emoji.unicode: false）にします。Mermaid の図は、HTML 版なら自分で <script> を足して描かせる方法もありますが、PDF にするなら SVG に書き出して画像として貼るのが確実です。Mermaid の書き方は、関連記事「Mermaid記法一覧｜全図種のコピペ用コードと描画結果まとめ」で扱っています。

カスタムテーマCSSの作り方（@theme・@import・@auto-scaling）

この節では、会社や自分の配色のテーマ CSS を作って、CLI と VS Code で使う方法が分かります。

テーマは1つの CSS ファイルで、先頭のコメント /* @theme 名前 */ が必須です。既存の default を @import 'default'; で読み込んでから上書きすると、ページ番号やヘッダーの配置はそのままに、色とフォントだけ変えられます。この記事の13枚を描画した実物のテーマがこれです。

/* @theme rjc */
/* @auto-scaling true */
@import 'default';

section {
  font-family: "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
  background: #fffdf8;
  color: #1f2937;
  padding: 60px 70px;
}
h1 { color: #c2410c; font-size: 56px; }
h2 { color: #9a3412; border-bottom: 3px solid #fb923c; padding-bottom: 6px; }
section::after { color: #9a3412; font-size: 20px; }   /* ページ番号 */
header, footer { color: #6b7280; font-size: 18px; }
code { background: #fff1e6; }
pre { background: #1f2937; color: #f3f4f6; }

section.lead { text-align: center; place-content: center; }

使うときは、Markdown の front-matter に theme: rjc と書き、CLI では --theme-set rjc-theme.css でファイルの場所を渡します。VS Code では設定 markdown.marp.themes に相対パスを書きます。手元の結果と、間違えたときの挙動はこうでした。

$ npx marp slides.md --theme-set rjc-theme.css --pdf --allow-local-files -o out/rjc.pdf
[  INFO ] slides.md => out/rjc.pdf        （13ページ・175KB・10.0秒）

# @theme コメントの無い CSS を渡した
[  WARN ] Cannot register theme CSS: t/bad.css (Marpit theme CSS requires @theme
          meta.)

# theme: rjc と書いたのに --theme-set を忘れた
→ エラーにならず、テーマ無し（素の HTML＋最低限の CSS）で出力された

テーマ CSS で覚えておく決まりは4つです。

• @theme は必須。無いと登録されず、警告が出て無視されます。
• サイズは section { width; height }。@size 名前 幅 高さ のコメントで、自作の size プリセット（A4 縦など）も定義できます。
• @auto-scaling true を書くと、コードブロックの自動縮小と <!-- fit --> が自作テーマでも効きます（@import 'default' だけでは引き継がれません）。
• ページ番号は section::after、ヘッダー・フッターは header・footer 要素。default テーマの CSS を読むと、何を上書きすればよいか分かります。

Marp for VS Codeの使い方（インストール・プレビュー・書き出し・設定）

この節では、VS Code の拡張機能での操作と、公式 README にある主な設定項目が分かります。VS Code の画面はこの環境で動かせないため、公式 README で確かめた範囲だけを書いています。

拡張機能「Marp for VS Code」を入れ、Markdown の front-matter に marp: true を書くと、通常のプレビューがスライドのプレビューに変わります。front-matter は、エディター右上の Marp アイコン → 「Toggle Marp feature for current Markdown」でも挿入できます。

公式 README によると、以前の設定名 markdown.marp.enableHtml と markdown.marp.chromePath は非推奨で、今は markdown.marp.html と markdown.marp.browserPath を使います。検索で見つかる解説の設定名が違うときは、この置き換えを疑います。VS Code 自体の入れ方は、関連記事「VSCode日本語化の方法｜拡張機能1つで切り替える手順と直らない時の対処」で扱っています。

発表者ノート・PDFのしおり・サーバーモード・設定ファイル

この節では、発表の準備と自動化に使う CLI の機能を、実行した結果とともに紹介します。

ディレクティブでない HTML コメントは発表者ノートになり、PDF の注釈・PPTX のノート・テキストファイルに取り出せます。手元の実行結果です。

$ npx marp t/hd.md --pdf --pdf-notes --pdf-outlines -o t/hd.pdf
→ PDF の各ページに注釈として「発表者ノート：ここは KaTeX」が付いた
→ しおり（アウトライン）: Page 1 / Page 2 / Page 3 と、各ページの見出し

$ npx marp t/hd.md --notes -o t/hd.txt
→ ノートだけのテキスト。ページの境目は --- で区切られる

サーバーモード（-s フォルダー）は、フォルダーの Markdown をブラウザから開くたびに変換します。127.0.0.1 の 18116 番で起動し、同じ Markdown を URL のクエリで形式を変えて取り出せました。

$ PORT=18116 npx marp -s t/srv
[  INFO ] [Server mode] Start server listened at http://localhost:18116/ ...

$ curl -s -o /dev/null -w "%{http_code} %{size_download}B %{time_total}s\n" http://127.0.0.1:18116/index.md
200 137242B 0.097s
$ curl ... "http://127.0.0.1:18116/index.md?pdf"
200 171170B 2.162s
$ curl ... "http://127.0.0.1:18116/index.md?pptx"
200 1097409B 2.843s

毎回オプションを打たないために、設定ファイル .marprc.yml（他に marp.config.js・package.json の marp も可）を置けます。手元では次の4行で、npx marp slides.md だけで自作テーマの PDF が出ました。

allowLocalFiles: true
pdf: true
themeSet: rjc-theme.css
lang: ja

-w（watch）は、Markdown とテーマ CSS の変更を監視して変換し直し、開いている HTML を自動で再読み込みします（公式 README）。

PowerPoint・Googleスライド・reveal.js・Slidevとの判断表

この節では、Marp と他のスライドの作り方の違いと、どれを選ぶかの判断が分かります。

「文字とコードが中心で Git で管理したい」なら Marp、「図形を自由に置く・他の人が PowerPoint で直す」なら PowerPoint か Google スライドです。reveal.js と Slidev は Marp と同じ Markdown 系ですが、Web の技術（HTML・JavaScript・Vue）を使う前提が強く、カスタマイズの幅と引き換えに覚えることが増えます。

生成 AI にスライドの骨子を書かせて Marp の Markdown に落とす流れは相性がよく、プロンプトの作り方は、関連記事「生成AIでスライド構成を作るプロンプト｜骨子づくりのテンプレート」で扱っています。

よくあるつまずきと直し方（原文つき）

この節では、手元で実際に起こしたつまずき8つの原文と、直し方が分かります。

画像が消える・日本語の字体が変わる・区切りが効かない、の3つが特に多いつまずきです。いずれも Marp の仕様どおりの挙動で、原因が分かれば1行で直ります。

日本語フォントの行は、同じ13枚を lang の有無だけ変えて PDF にし、埋め込まれたフォント名を比べました。

$ pdffonts out/default.pdf | head -4      # lang 無し
AAAAAA+Inter-SemiBold           Type 3
BAAAAA+WenQuanYiZenHei          Type 3     ← 日本語が中国語用フォント

$ pdffonts out/ja.pdf | head -4           # lang: ja
AAAAAA+Inter-SemiBold           Type 3
BAAAAA+NotoSansCJKjp-Bold       Type 3     ← 日本語用フォント

フォントの選ばれ方は変換する PC に入っているフォント次第なので、配布する資料は、テーマ CSS で font-family を明示し、変換する PC（CI なら Docker イメージ）に同じフォントを入れておくと、どこで変換しても同じ見た目になります。

• 1front-matter に lang: ja がある無いと日本語の字体が中国語用のフォントで描かれることがある
• 2--- の前後に空行がある文の直後の --- は見出しの下線になり、スライドが減る
• 3画像を使うなら --allow-local-files か URLPDF・PPTX・PNG は既定でローカル画像を遮断する
• 4自作テーマは @theme と --theme-set の両方片方が無いとエラーにならずに素の見た目で出る
• 5配布前に PDF を開いて最後のページまで見るはみ出し・絵文字の欠け・ページ番号の有無は PDF で確かめる

よくある質問

Q. Marp とは何ですか？ A. Markdown で書いた文章をスライドに変換するオープンソースのツール群です。VS Code の拡張機能（Marp for VS Code）、コマンドラインの変換ツール（Marp CLI）、変換エンジン（Marp Core）からなり、HTML・PDF・PPTX・PNG に出力できます。

Q. Marp は無料ですか？ A. いずれも MIT ライセンスのオープンソースで、無料で使えます。PDF などの変換に使うブラウザ（Chrome・Edge・Firefox）も無料です。

Q. Marp の使い方の最短手順は？ A. VS Code に Marp for VS Code を入れ、.md の先頭に --- で囲んだ marp: true を書き、スライドの境目に --- を置きます。プレビューで確かめ、右上の Marp アイコンから PDF に書き出します。

Q. PDF にするのにブラウザが要るのはなぜですか？ A. Marp はスライドを HTML と CSS として作り、PDF・PPTX・画像は Chrome などに描画させて保存するためです。ブラウザが無いと No suitable browser found で止まります。場所が特殊なら CHROME_PATH か --browser-path で指定します。

Q. PDF にすると画像が消えます。 A. PC 内の画像は安全のため既定で遮断されます。Marp CLI なら --allow-local-files を付けます（信頼できる Markdown だけに使う）。VS Code の書き出しでは許可されています。ネット上に置いた画像の URL なら、どちらでも表示されます。

Q. 日本語が文字化け・字体が変です。 A. 字体が中国語風なら front-matter に lang: ja を書きます。□ になるなら変換する PC に日本語フォントが無いので、フォントを入れてテーマ CSS の font-family で指定します。手元では lang: ja の有無で、PDF に埋め込まれるフォントが WenQuanYi Zen Hei から Noto Sans CJK JP に変わりました。

Q. PPTX に出力すると PowerPoint で文字を編集できません。 A. 通常の PPTX は各ページを画像として貼る形式です。編集できる PPTX は、実験的な --pptx-editable（LibreOffice Impress が必要）で作れますが、再現性は通常より低いと公式が注意しています。他の人に編集してもらう資料は、最初から PowerPoint で作る方が確実です。

Q. 2カラムにするには？ A. Markdown の構文にはありません。画像と文章なら ![bg left:40%](画像)、文章同士ならテーマ CSS で columns: 2 か CSS Grid を当てます。この記事に両方の CSS を載せています。

Q. 1ページ目だけページ番号を消すには？ A. そのページに <!-- _paginate: false --> と書きます。名前の前の _ が「このページだけ」の印（スポットディレクティブ）です。_header・_footer も同じです。

Q. 数式は使えますか？ A. 使えます。行内は $ 1つ、ブロックは $ 2つで囲んで書き、既定は MathJax、math: katex で KaTeX に切り替えられます。金額の $ が数式扱いされて困るときは math: false で止められます。

Q. Marp の Markdown は他のツールでも開けますか？ A. 普通の Markdown なので、GitHub や他のエディターでも文章として読めます。ただし --- は水平線、ディレクティブのコメントは表示されないだけで、スライドとしては表示されません。

Q. スライドの縦横比や大きさは変えられますか？ A. size: 4:3 で 960×720、既定の 16:9 は 1280×720 です。手元の PDF は 16:9 が 960×540pt、4:3 が 720×540pt でした。自作テーマなら section { width; height } と @size コメントで A4 縦などのプリセットも作れます。

まとめ

• Marp は Markdown を --- で区切ってスライドにするツール群。VS Code 拡張で書き、CLI で変換・自動化する。
• 13枚の変換は HTML 0.7秒（136KB）、PDF 5.9秒（295KB）、PPTX 7.1秒（1.17MB）、PNG 8.3秒。PDF・PPTX・PNG にはブラウザが要る。
• PPTX は各ページが画像で、PowerPoint では文字を直せない。編集してもらう資料は --pptx-editable（実験的）か、最初から PowerPoint で作る。
• 画像は ![w:400]・![bg left:40%]、2カラムはテーマ CSS の columns: 2 か Grid。自作テーマは /* @theme 名前 */ と @import 'default' から始める。
• つまずきの3大原因は、ローカル画像の遮断（--allow-local-files）、lang: ja の無い日本語フォント、--- の前後の空行。

参考・出典

確認日はいずれも 2026年10月29日です。

• Marp 公式サイト「Getting Started / Install」：https://marp.app/docs/introduction/install
• Marp CLI 公式リポジトリ README（インストール・オプション・--allow-local-files・--pptx-editable・サーバーモード・設定ファイル）：https://github.com/marp-team/marp-cli/blob/main/README.md
• Marp for VS Code 公式リポジトリ README（設定項目・エクスポート・ブラウザ要件）：https://github.com/marp-team/marp-vscode/blob/main/README.md
• Marp Core 公式リポジトリ README（組み込みテーマ・size・math・HTML の許可リスト・auto-scaling・emoji）：https://github.com/marp-team/marp-core/blob/v4/README.md
• Marpit 公式ドキュメント「Directives」：https://marpit.marp.app/directives
• Marpit 公式ドキュメント「Image syntax」：https://marpit.marp.app/image-syntax
• Marpit 公式ドキュメント「Theme CSS」：https://marpit.marp.app/theme-css

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。