Help us understand the problem. What is going on with this article?

Markdownプレゼンテーションでパワポおじさん脱出

普段 VSCode で Markdown を書いている人におすすめです。VSCode の拡張機能で Marp というものがあります。Markdown を書くと16:9のスライドPDFに変換してくれます。

ポイント

  • Markdownとスライド資料が1つで済む
  • 良くも悪くも1ページ10行程度にまとめる
  • 使い捨ての資料には向くが、本気のプレゼンには向かない

Markdown

---
marp: true
paginate: true
theme: default
backgroundColor: whitesmoke
headingDivider: 1
---
<style>
h1 { font-size: 42pt; color: royalblue; }
li,p,table { font-size: 32pt; color: black; }
</style>

# Marp のメリット
- メリット
  - 改ページが自動になる。
  - 文字位置を考えなくてよい。
- デメリット
  - 長い説明には向かない。
  - 画像が扱いにくい。

# 表
|名前|vCPU|メモリ|月額|
|-|-:|-:|-:|
|t3.micro  |2| 1 GiB| 1700円|
|t3.small  |2| 2 GiB| 3400円|
|t3.medium |2| 4 GiB| 5500円|
|t3.large  |2| 8 GiB|10300円|

# ページごと
<!-- _class: lead -->
_class でこのページだけ中央寄せ(gaiaのとき)

# 画像(右)
- 背景画像を使います。
![bg right:35% 90%](1.png)

# 画像(挿入)
![h:200](1.png)
画像を挿入できます。

Markdown プレビュー

theme=default theme=gaia

解説

説明
marp Marpを有効
paginate ページ番号を表示
theme default と gaia、あとテーマなしの uncover があります
backgroundColor 背景色
headingDivider 見出し1で改ページが可能

画像

できる
![bg right:40% 90%](1.png)
![bg left:40% 90%](1.png)
![w:200](1.png)
![h:200](1.png)

できない
![bg bottom:40% 90%](1.png)
![x:200](1.png)
<img src='1.png'>

補足
style を駆使すればもっといろんなことができるのですが、やりすぎるとMarpの意味がなくなってしまいます。デザインに凝るならパワポ使った方がいいです。

感想

1ページに収まるように説明文を10行以内にまとめなければいけません。逆に1ページにまとめることがいいと思いました。ITのドキュメントって長いわりに意味不明なものが多いです。スライドだけじゃなく普段のMarkdownもコンパクトにまとめようと思いました。

koji4104
Windowsに未来はあるのか
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away