Marpのスライドデザインまとめ

[Marp](https://marp.app/)という、Markdownでいい感じのプレゼンテーションスライドを作成できるツール（エコシステム）があります。

デフォルトだと

- default
- gaia
- uncover

の３種類のテーマが選択できますが、自作テーマを公開して使えるようにしてくれている方もいます。

読み込んですぐ使えるテーマをまとめておきます。

## 説明の見方

- h2見出し：テーマ名
- 見た目：スライドのサンプル
- invert：`class: invert`を設定した場合の見た目

## default

### 見た目

#### normal
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/f932c709-af87-b3ff-be3f-ad5e6e741f80.png)

#### invert

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/2ee08b86-cf43-3c2f-ad66-4b4c6418e7d6.png)


### 使い方

特になし。Marpのスライドを作るとデフォルトがこれ

## gaia

### 見た目

#### normal

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/19d776bf-79c6-4e90-5bb8-ce8bc6483817.png)

※スライド下部が切れてしまっている

#### invert

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/10c93083-85ae-8874-5a9f-6e4bb1e988af.png)

※スライド下部が切れてしまっている

### 使い方

```
theme: gaia
```

## uncover

### 見た目

#### normal

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/58a9eba3-958e-fb17-eb76-e9b5d3c43234.png)

※スライド上部＆下部が切れてしまっている

#### invert

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/be73d91b-3622-d3f9-9f9f-5d7bac889533.png)

※スライド上部＆下部が切れてしまっている

### 使い方

```
theme: gaia
```

## gradient

[Marp Community Themes](https://marp-community-themes.vercel.app/gradient)

### 見た目

#### normal

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/837acd5c-6509-54b3-47db-46f43784ea46.png)

#### blue

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/c705ec16-f9ac-3c1c-7e06-aff293204584.png)

### 使い方

vscodeの設定 Markdown > Marp:Themesに以下URLを設定
```
https://raw.githubusercontent.com/rnd195/my-marp-themes/main/gradient.css
```

＆Markdownファイルに以下を追加
```
theme: gradient
class: blue <- blueの場合はこの行を追加
```

## beamer

[Marp Community Themes](https://marp-community-themes.vercel.app/beamer)

### 見た目

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/c758b559-6b2a-3579-5775-e8f2b3fd4f29.png)


### 使い方

vscodeの設定 Markdown > Marp:Themesに以下URLを設定
```
https://raw.githubusercontent.com/rnd195/my-marp-themes/main/beamer.css
```

＆Markdownファイルに以下を追加
```
theme: beamer
```

## border

[Marp Community Themes](https://marp-community-themes.vercel.app/border)

### 見た目

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/bb4ea279-a81c-5655-a440-1f1b6ac3c513.png)


### 使い方

vscodeの設定 Markdown > Marp:Themesに以下URLを設定
```
https://raw.githubusercontent.com/rnd195/my-marp-themes/main/border.css
```

＆Markdownファイルに以下を追加
```
theme: border
```

## dracula

[Dark theme for Marp and 275+ apps — Dracula](https://draculatheme.com/marp)

### 見た目

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/e7e499c5-f905-4b45-3208-02e0af112947.png)


### 使い方

vscodeの設定 Markdown > Marp:Themesに以下URLを設定
```
https://raw.githubusercontent.com/dracula/marp/master/dracula/dracula.css
```

＆Markdownファイルに以下を追加
```
theme: dracula
```


## speee

[speee/marp-speee-theme: Speee用のmarpテーマ](https://github.com/speee/marp-speee-theme)

**企業ロゴが含まれているので、上記ページで使用ルールをよく確認すること**

### 見た目

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/7cd9f5ce-9c48-0fa0-cc06-027db5e9411b.png)


### 使い方

vscodeの設定 Markdown > Marp:Themesに以下URLを設定
```
https://raw.githubusercontent.com/speee/marp-speee-theme/main/marp-themes/speee.css
```

＆Markdownファイルに以下を追加
```
theme: speee
```

## freud

[cunhapaulo/marpstyle: Repository for Marp Themes created with beauty and simplicity in mind.](https://github.com/cunhapaulo/marpstyle)

### 見た目

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/d0bcdd0f-4928-e8c8-94bc-f27d272ce8ce.png)


### 使い方

vscodeの設定 Markdown > Marp:Themesに以下URLを設定
```
https://cunhapaulo.github.io/style/freud.css
```

＆Markdownファイルに以下を追加
```
theme: freud
```


## plato

[cunhapaulo/marpstyle: Repository for Marp Themes created with beauty and simplicity in mind.](https://github.com/cunhapaulo/marpstyle)

### 見た目

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/db322dc7-232b-af74-1160-93e6eec0ca9d.png)


### 使い方

vscodeの設定 Markdown > Marp:Themesに以下URLを設定
```
https://cunhapaulo.github.io/style/plato.css
```

＆Markdownファイルに以下を追加
```
theme: plato
```

## heidegger

[cunhapaulo/marpstyle: Repository for Marp Themes created with beauty and simplicity in mind.](https://github.com/cunhapaulo/marpstyle)

ハイデガーというよりブルース・リーでは

### 見た目

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46492/084e5ce2-3b74-bf48-f3ad-e2d5bdc35787.png)


### 使い方

vscodeの設定 Markdown > Marp:Themesに以下URLを設定
```
https://cunhapaulo.github.io/style/heidegger.css
```

＆Markdownファイルに以下を追加
```
theme: heidegger
```





## おわりに

ここに挙げたもの以外にもよさそうなテーマはいくつもあったものの、ローカルにCSS含めて落としてくる必要がったりで、「手軽に（ローカルにファイルを落としたりせず）使えるもの」に絞ってまとめました






## 参考記事

- [【Marp】Web上で公開されているthemeを読み込む【VSCode】 - Qiita](https://qiita.com/wrongwrong/items/b400ef6a40a9f68e3354)