# MarpでMarkdownファイルをもとにして簡単にスライドを作成する

URL: https://webrandum.net/marp/
公開日: 2022-08-30
更新日: 2022-08-30
カテゴリー: 資料作成
タグ: Markdown, Marp
出典: Webrandum（著者: サイトウ マサカズ）

スライドを作成するとき、PowerPointやKeynoteが一般的ですが、簡単なスライドを作るだけだと変にこだわりすぎてしまって時間がかかりすぎてしまいます。

Markdown記法をもとにスライドが生成できる「Marp」というツールがあるので、これを使うと下書きの文章をすぐにスライド化できます。

## Marp

[![](https://www.google.com/s2/favicons?domain=marp.app)marp.app![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/b42971bf74af569b068ba384a2ba2f9c7d5fcc24b299ee6c97dfe618b0d15d11.webp)Marp: Markdown Presentation Ecosystemhttps://marp.appMarp (also known as the Markdown Presentation Ecosystem) provides an intuitive experience for creating beautiful slide decks. You only have to focus on writing your story in a Markdown document.](https://marp.app/)

Marpは日本生まれのオープンソースツールで、Markdownの文法によってスライドを生成できるツールです。

PDFだけでなく、`.pptx`（Microsoft PowerPoint用ファイル）に変換できるので、とりあえずベースだけササッとMarkdownで書いて作ってしまって、残りはPowerPointで装飾など細かい部分だけ調整するような作り方もできます。

## Marpの変換方法

Marpの変換方法はVisual Studio Codeの拡張機能を使うか、CLIツールを使うかの2通りです。

### Marp for VS Code

[![](https://www.google.com/s2/favicons?domain=marketplace.visualstudio.com)marketplace.visualstudio.com![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/225660634b0b28c3808fd93f8e96bcda6c3fc1c77d6d5c8ec1550f6421a4929f.webp)Marp for VS Code - Visual Studio Marketplacehttps://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscodeExtension for Visual Studio Code - Create slide deck written in Marp Markdown on VS Code](https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode)

 Visual Studio Codeの拡張機能をインストールすれば、すぐにVisual Studio Code上でMarpの記述をしてプレビュー・書き出しができます。

インストール後は新規でMarkdownファイルを作成して、shift + command + Pのあとに「Marp」と入力します。

![Visual Studio CodeでMarpの使用](https://webrandum.net/mskz/wp-content/uploads/2022/08/image_1-16.png)

表示されるメニューの中から「Marp: Toggle Marp Feature For Current Markdown」を選択すれば準備完了です。

![Visual Studio CodeでMarpのプレビュー](https://webrandum.net/mskz/wp-content/uploads/2022/08/image_2-14.png)

書き出したい場合は「Marp: Export Slide Deck…」を選択するか、右上のMarpアイコンをクリックして「Export Slide Deck」をクリックすれば書き出せます。

書き出せる形式は下記の通りです。

- html

- pdf

- pptx

- png

- jpeg

### Marp CLI

[![](https://www.google.com/s2/favicons?domain=github.com)GitHub![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/478b6fd687a6565771585daf235bd911515de53f85adad1bb57e3248dbc479f6.webp)GitHub - marp-team/marp-cli: A CLI interface for Marp and Marpit based conver...https://github.com/marp-team/marp-cliA CLI interface for Marp and Marpit based converters - GitHub - marp-team/marp-cli: A CLI interface for Marp and Marpit based converters](https://github.com/marp-team/marp-cli)

npmでインストールして、コマンドでコンパイルができます。

Node.jsのバージョンが14以降であれば、`npx`コマンドを使ってすぐに使えます。

```
# HTMLに変換
npx @marp-team/marp-cli@latest slide-deck.md
npx @marp-team/marp-cli@latest slide-deck.md -o output.html

# PDFに変換
npx @marp-team/marp-cli@latest slide-deck.md --pdf
npx @marp-team/marp-cli@latest slide-deck.md -o output.pdf

# PowerPointファイル（pptx）に変換
npx @marp-team/marp-cli@latest slide-deck.md --pptx
npx @marp-team/marp-cli@latest slide-deck.md -o output.pptx

# プレビューウインドウを表示するときは「-p」オプションを使う
npx @marp-team/marp-cli@latest -p slide-deck.md

# ウォッチモード（保存したら自動で変換）を使うときは「-w」オプションを使う
npx @marp-team/marp-cli@latest -w slide-deck.md

# サーバーモード（ディレクトリごと指定する）を使うときは「-s」オプションを使う
npx @marp-team/marp-cli@latest -s ./slides
```

## 基本的な使い方

まず、Markdownファイルの最初にMarp用の記述を追加します。

```
---
marp: true
---
```

以降はハイフン3つ（—）でスライドを区切っていきます。

```
---
marp: true
---
1スライド
---
2スライド

---
3スライド
```

![スライドの区切り方](https://webrandum.net/mskz/wp-content/uploads/2022/08/image_3-11.png)

### 見出しの使用

通常のMarkdownと同じように、ハッシュ記号（`#`）で見出しを作成できます。

```
---
marp: true
---
# Marpを使ってスライド作成
```

![Marpで見出しの使用](https://webrandum.net/mskz/wp-content/uploads/2022/08/image_4-7.png)

### その他の装飾

Markdownのリストやテーブルなどの装飾もそのままスライド内で使えます。

![Marpの装飾](https://webrandum.net/mskz/wp-content/uploads/2022/08/image_5-6.png)

### 画像の設定

画像を指定する場合は、通常のMarkdown記述とは少し違う記述をしないといけない場合があります。

#### 背景画像の指定

背景画像として指定したい場合はMarkdownの画像の書き出しとほぼ同じですが、本来alt属性を入力する部分に「bg」を入力します。

これで全画面に背景画像が配置されます。

他にも左側に配置したい場合は「left:50%」を追加します。

```
---
# 背景画像を全面配置
![bg](image.jpg)

---
# 左側に配置
![bg left:50%](image.jpg)

---
# 右側に配置
![bg right:50%](image.jpg)
```

#### px指定

px指定の場合は通常のMarkdownと同じ方法を使います。

横幅か高さのどちらか片方だけを指定すると、比率は保持されます。

```
## Pixel指定(縦の場合)
![height:480](slide_image.png)

## Pixel指定(横の場合)
![width:680](slide_image.png)
```

#### %指定

%指定の場合は直接HTMLタグで記述します。

ただ、このパーセントはスライドの横幅に対するパーセントではなく、参照元の画像に対するパーセントになります。

```
## %指定
<img src="slide_image.png" width=50%>
```

### フッター

全スライドに共通のフッターを入れたい場合は、下記のコードを追加します。

```
<!-- footer: フッターの文字列です -->
```

ちなみに、追加したスライド以降にすべて表示されます。

1スライド目は表紙なので表示したくない場合は、2スライド目にコードを追加します。

### ページ番号

スライド右下にページ番号を表示させたい場合は、下記コードを追加します。

```
<!-- paginate: true -->
```

これもフッターと同じで、表紙に表示させたくない場合はコードを2スライド目に追加します。

フッターとページ番号はそれぞれ下記のようにプレビューされます。

![フッターとページ番号のプレビュー](https://webrandum.net/mskz/wp-content/uploads/2022/08/image_6-3.png)

## テーマの変更

テーマの変更をすれば一気に見た目が変わります。

Markdown最初に「theme:」と入力して、そのあとにテーマ名を入力すれば変更できます。

現在「gaia」というテーマがあるので、試しに変更してみると下記のようにプレビューされます。

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

![gaiaにテーマを変更](https://webrandum.net/mskz/wp-content/uploads/2022/08/image_7-1.png)

## CSSの変更

テーマ以外に細かい変更をしたい場合はCSSが使えます。

Markdown最初に「style: |」と入力して、そのあとにCSSを入力します。

「style:」のあとの「`|`」はMarkdownで複数行テキストを入力するために必要な記述で、これがないと改行後のCSSが認識されません。

```
---
marp: true
style: |
  h1 {
    color: #0076b5;
    font-size: 3.0em;
  }
---
```

![MarpでCSSの適用](https://webrandum.net/mskz/wp-content/uploads/2022/08/image_8.png)

結局CSSをいろいろ調整してこだわってしまうと、時間がかかってしまいます。

本当に気になる部分で抑えておく、できれば使わないようにするのが良さそうです。