（備忘録）Marpテンプレート

# 1. はじめに
VS CodeとMarkDownで作れるプレゼンテーション資料「Marp」のテンプレートについて、自分への備忘録としてまとめてみました。ご参考になれば幸いです。

# 2. 前提知識
- VS Code
- Marp（なくてもOK）
- Markdown
- CSS（なくてもOK）

# 3. 参考サイト
- [【VS Code + Marp】Markdownから爆速・自由自在なデザインで、プレゼンスライドを作る](https://qiita.com/tomo_makes/items/aafae4021986553ae1d8)
- [Marpit](https://marpit.marp.app/)

# 4. VS CodeでのMarpプレビュー
![Marpプレビュー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240522/744a624d-a465-5bd4-914f-d69a5143c458.png)


# 5. Marpテンプレート（おしゃれ風）

```markdown:MarpTemplate.md
---
marp: true
theme: default
header: "**ヘッダータイトル1** __ヘッダータイトル2__"
footer: "by **＠NISHIZONO**"

size: 16:9
paginate: true

style: |
    section.title {
        justify-content: center;
        text-align: left;
    }

    section {
        justify-content: start;
    }

---
<!-- _class: title -->
# タイトル
- この資料は、Marp for VS Code を利用して作成しています。
参考URL：[https://qiita.com/tomo_makes/items/aafae4021986553ae1d8](https://qiita.com/tomo_makes/items/aafae4021986553ae1d8)


<!--
_color: white
_footer: 'Photo by Earl Lasala on Unsplash'
-->
![bg brightness:0.4](https://images.unsplash.com/photo-1600183309638-bb6dfca7e921?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80)

---
## スライド1
- あああ
- いいい
- ううう


<!--
_footer: 'Photo by Tom Pottiger on Unsplash'
-->
![bg left:40%](https://images.unsplash.com/photo-1523037516325-923715696102?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80)

---
## スライド2
- あああ
- いいい
- ううう


<!--
_footer: 'Photo by Frederic Köberl on Unsplash'
-->
![bg right:40% brightness:0.8](https://images.unsplash.com/photo-1559555297-8ff54b6862e0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80)

---
## スライド3
- あああ
- いいい
- ううう


<!--
_footer: 'Photo by Peo Hedin on Unsplash'
-->
![bg left:40% brightness:0.8](https://images.unsplash.com/photo-1595939572262-3666138363af?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80)

---
## スライド4
- あああ
- いいい
- ううう


<!--
_footer: 'Photo by Markus Voetter on Unsplash'
-->
![bg right:40% brightness:0.6](https://images.unsplash.com/photo-1516206774359-01eb08060244?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80)

---
## スライド5
- あああ
- いいい
- ううう


<!--
_footer: 'Photo by Earl Lasala on Unsplash'
-->
![bg left:40% brightness:0.8](https://images.unsplash.com/photo-1600183214420-1b4e6162dd55?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80)

---
## スライド6
- あああ
- いいい
- ううう


<!--
_footer: 'Photo by Abdullah Ahmad on Unsplash'
-->
![bg right:40% brightness:1.2](https://images.unsplash.com/photo-1612729541961-90e8dbc80497?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80)

---
## スライド7
- あああ
- いいい
- ううう


<!--
_footer: 'Photo by jet dela cruz on Unsplash'
-->
![bg left:40% brightness:1.2](https://images.unsplash.com/photo-1603852451827-102c34437985?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80)

---
## スライド8
- あああ
- いいい
- ううう


<!--
_footer: 'Photo by Ralph (Ravi) Kayden on Unsplash'
-->
![bg right:40% brightness:1.2](https://images.unsplash.com/photo-1597602103287-0b5581d80427?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80)
```

# 6. Marpテンプレート（タイトルのカスタマイズ）
- 参考サイト：[Split slides #137](https://github.com/marp-team/marpit/issues/137#issuecomment-522006274)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240522/e08a8d0e-5448-3229-4b17-827400020b22.png)


```markdown:StylingSlide.md
---
marp: true
theme: default
header: "**ヘッダータイトル1** __ヘッダータイトル2__"
footer: "by **＠NISHIZONO**"

size: 16:9
paginate: true

style: |
    section.title {
        --title-height: 130px;
        --subtitle-height: 70px;

        overflow: visible;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr var(--title-height) var(--subtitle-height) 1fr;
        grid-template-areas: "." "title" "subtitle" ".";
    }

    section.title h1,
    section.title h2 {
        margin: 0;
        padding: 0;
        text-align: center;
        height: var(--area-height);
        line-height: var(--area-height);
        font-size: calc(var(--area-height) * 0.7);

        border: 1px dashed gray; /* debug */
    }

    section.title h1 {
        grid-area: title;
        --area-height: var(--title-height);
    }

    section.title h2 {
        grid-area: subtitle;
        --area-height: var(--subtitle-height);
    }

    section {
        justify-content: start;
    }

---
<!-- _class: title -->
# タイトル
## サブタイトル

---
# スライド1
## スライド1サブタイトル
- あああ
- いいい
- ううう

---
# スライド2
## スライド2サブタイトル
- あああ
- いいい
- ううう
```

# 7. Marpテンプレート（2段組み）
- 参考サイト：[Split slides #137](https://github.com/marp-team/marpit/issues/137#issuecomment-524175560)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240522/d303dfc1-26c3-5fc4-2f3d-6cd9022ac601.png)

```markdown:SplitSlides1.md
---
marp: true
theme: default
header: "**ヘッダータイトル1** __ヘッダータイトル2__"
footer: "by **＠NISHIZONO**"

size: 16:9
paginate: true

style: |
    section.split {
        overflow: visible;
        display: grid;
        grid-template-columns: 500px 500px;
        grid-template-rows: 100px auto;
        grid-template-areas: 
            "slideheading slideheading"
            "leftpanel rightpanel";
    }

    /* debug */
    section.split h3, 
    section.split .ldiv, 
    section.split .rdiv { border: 1.5pt dashed dimgray; }
    section.split h3 {
        grid-area: slideheading;
        font-size: 50px;
    }
    section.split .ldiv { grid-area: leftpanel; }
    section.split .rdiv { grid-area: rightpanel; }

---
<!-- _class: split -->
### A split slide

#### Title for the left panel 1
- listed item 1-1
- listed item 1- 2
- listed item 1-3
- listed item 1-4

#### Title for the left panel 2
- listed item 2-1
- listed item 2-2
- listed item 2-3
- listed item 2-4
```

# 8. Marpテンプレート（MSスタイル）
- 参考サイト：[Marp を使ってスライドを作ってみる](https://blog.okazuki.jp/entry/2019/07/24/182744)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240522/7ae57289-ca17-bd09-043d-25d15759d961.png)


```markdown:MSstyle.md
---
marp: true
theme: base
header: "**ヘッダータイトル1** __ヘッダータイトル2__"
footer: "© Copyright xxxx All rights reserved. by **＠NISHIZONO feat.MSk**"

size: 16:9
paginate: true

style: |
    section.title {
        justify-content: center;
        background-color: #0078D7;
        font-family: 'Yu Gothic UI';
        color: white;
    }
    section.title > h1, h2, h3, h4, h5, header, footer{
        color: white;
    }

    section {
        justify-content: start;
        background-color: white;
        font-family: 'Yu Gothic UI';
        color: black;
    }
    section > h1, h2, h3, h4, h5, header, footer{
        color: black;
    }

    section.blue {
        background-color: #0078D7;
        color: white;
    }
    section.blue > h1, h2, h3, h4, h5, header, footer{
        color: white;
    }

---
<!-- _class: title -->
![bg 90%](images/bg.png)
# タイトル
2021/xx/xx
feat.MSk

---
<!-- _class: blue -->
# セクション見出し
- あああ
- いいい
- ううう

---
# 本文1
- あああ
- いいい
- ううう
- えええ

---
# 本文2
- あああ
- いいい
- ううう

---
<!-- _class: blue -->
![bg 30% vertical](images/logo.png)
```

# 9. Marpテンプレート（シンプル、タイトル中央、文字上寄せ）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240522/a446c583-75f8-eb82-a0d0-3a71b1b958b1.png)

```markdown:simple.md
---
marp: true
theme: default
header: "**ヘッダータイトル**"
footer: "© Copyright xxxx All rights reserved."

size: 16:9
paginate: true

style: |
    section.title {
        justify-content: center;
        text-align: center;
    }

    section {
        justify-content: start;
    }

---
<!-- _class: title -->
# タイトル
#### この資料は、Marp for VS Code を利用して作成しています。


<!--
_color: white
_footer: 'Photo by Earl Lasala on Unsplash'
-->
![bg brightness:0.4](https://images.unsplash.com/photo-1600183309638-bb6dfca7e921?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80)

---
## スライド1
- あああ
- いいい
- ううう

---
## スライド2
- あああ
- いいい
- ううう

---
## おわりに
ご清聴ありがとうございました

<!--
_footer: 'Photo by jet dela cruz on Unsplash'
-->
![bg left:40% brightness:1.2](https://images.unsplash.com/photo-1603852451827-102c34437985?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80)
```

# 10. おわりに
Marpプレゼンテーションの参考になれば幸いです。

2021/02/18 TAKAHIRO NISHIZONO