上記のうち、Marpで以下3つ、実際スライドを作った。その手順をまとめておく。
サンプル
サンプル1
サンプル2
サンプル3
0. 準備
結局Markdownでプレゼン資料ってどれで作ると良いのよ？と思ったときの選択肢#Marp 参照のこと
1. 全体の話の流れを決める
*.txt
タイトル
Marpでスライドを簡単に作ろう
お名前・所属 [@yamada_n](https://e99h2121.github.io/)
はじめに
これはサンプルです
ここがタイトル
副題
内容
テキストはMarkdown記法。
*[リンクも張れる(Markdown記法 チートシート)](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)
画像挿入
背景に白抜き
画像を小さくしたりぼやかしたりできる
:pineapple: 絵文字もつかえる :pineapple:
画像を右
画像を左
Enjoy!
2. Markdownに起こす
./images に画像の置き場所を作っておく。
Markdown
# タイトル
## Marpでスライドを簡単に作ろう
お名前・所属 [@yamada_n](https://e99h2121.github.io/)
# はじめに
これはサンプルです
# ここがタイトル
## 副題
内容
# テキストはMarkdown記法。
*[リンクも張れる(Markdown記法 チートシート)](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)
# 画像挿入
# 背景に白抜き
# 画像を小さくしたりぼやかしたりできる
# :pineapple: 絵文字もつかえる :pineapple:
# 画像を右
# 画像を左
# Enjoy!
3. ページの区切りを考える
--- が改ページになります。
---
4. 画像を入れる
Marp イメージシンタックス
例)
画像として挿入したい場合: 
背景として挿入したい場合: 
背景として30%の大きさにしぼやかしたい場合: 
いらすとや
パブリックドメインの絵画など
5. スタイルやフォントを決める
フォント
サンプル1
Markdown
---
theme: uncover
marp: true
paginate: true
footer: See also https://twitter.com/e99h2121
---
<style>
@import url('https://fonts.googleapis.com/css?family=Noto Sans JP&display=swap');
section {
font-family: 'Noto Sans JP', serif;
background-color: ivory;
}
</style>
<!--
_paginate: false
_color: ivory;
-->
# タイトル
#### Marpでスライドを簡単に作ろう
お名前・所属 [@yamada_n](https://e99h2121.github.io/)
---
*はじめに
- サンプルです
---
# タイトル
## 副題
内容
---
# テキストはMarkdown記法。
*[リンクも張れる(Markdown記法 チートシート)](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)
---
# 画像挿入
---
<!--
_color: ivory;
-->
# 背景に白抜き
---
# 画像を小さくしたりぼやかしたりできる
---
# :pineapple: 絵文字もつかえる :pineapple:
---
# 画像を右
---
# 画像を左
---
# Enjoy!
サンプル2
Markdown
---
theme: uncover
marp: true
paginate: true
header: sample
footer: Pineapple / Strictly Confidential
---
<style>
@import url('https://fonts.googleapis.com/css?family=Noto Sans JP&display=swap');
section {
font-family: 'Noto Sans JP', serif;
}
header {
width: 100%;
color: orange;
background-image: url(./images/pineapple.png);
background-repeat: no-repeat;
background-position: 85%;
top: 10px;
text-align: left;
padding: 33px;
}
footer {
width: 100%;
color: white;
background: linear-gradient(to right, orange, white);
text-align: left;
padding: 10px;
}
</style>
<!--
_paginate: false
_color: black;
-->
# タイトル
#### MarpとMarkdownでスライドを簡単に作ろう
お名前・所属 [@yamada_n](https://twitter/e99h2121)
---
# タイトル
## 副題
内容
---
# テキストはMarkdown記法。
*[リンクも張れる(Markdown記法 チートシート)](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)
---
# 画像挿入
---
Enjoy!
サンプル3
Markdown
---
theme: uncover
marp: true
paginate: true
---
<style scoped>
section {
font-size: 400%;
}
</style>
HTMLタグを使いたい場合は、ページ右肩の真ん中のボタン（Marp のマークのボタン）を押して、［Open extension settings］を選ぶ。そして、「Enable HTML」のチェックボックスにチェックを入れる。
---
文字サイズを変更したいページの冒頭に、以下の内容を入れる。これで、文字サイズは4倍になる。style scoped を設定すると、その領域だけにWebページのスタイルが適用になる。
```
<style scoped>
section {
font-size: 400%;
}
</style>
```
---
<style>
@import url('https://fonts.googleapis.com/css?family=Noto Sans JP&display=swap');
section {
font-family: 'Noto Sans JP', serif;
}
</style>
scoped でなければ全ページに適用
---
<style scoped>
section {
background-color: ivory;
}
</style>
# おおお
---
<style scoped>
section {
background: linear-gradient(to right, #16a085, #f4d03f);
color: white;
}
</style>
# かっこいい
補足
この 4. 画像を入れる あるいは 5. スタイルやフォントを決める は逆のこともある。あるいは行き来しながら整える。迷った場合には 箇条書きで 全体の話の流れ を見直してみること。
- タイトル
- Marpでスライドを簡単に作ろう
- お名前・所属 [@yamada_n](https://e99h2121.github.io/)
- はじめに
- これはサンプルです
- ここがタイトル
- 副題
- 内容
- テキストはMarkdown記法。
- *[リンクも張れる(Markdown記法 チートシート)](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)
- 画像挿入
- 背景に白抜き
- 画像を小さくしたりぼやかしたりできる
- :pineapple: 絵文字もつかえる :pineapple:
- 画像を右
- 画像を左
- Enjoy!
6. 全体見直し
- 統一感。
- 書き込みすぎていないか。1秒で聴衆がスライドの内容を概観できるか。
7. 完成したMarkdownを転用
元がMarkdownだから、他に転用するのも簡単。
https://github.com/e99h2121/slides/tree/master/template
Happy Presentation Life!
以上参考になればさいわいです。