---
marp: true
---
Marp
===
##### Markdown プレゼンテーションのエコシステム
###### by Marp チーム ([@marp-team][marp-team])
[marp-team]: https://github.com/marp-team
[marpit]: https://github.com/marp-team/marpit
[marp-core]: https://github.com/marp-team/marp-core
[marp-cli]: https://github.com/marp-team/marp-cli
[marp-vscode]: https://github.com/marp-team/marp-vscode
---
# 特徴
- :memo: **Markdown 記法を使用したプレゼンテーションの作成** (CommonMark)
- :factory: [Marpit framework][marpit] を基に構築: プレゼンテーションを作成するための新しく軽量なフレームワーク
- :gear: [Marp Core][marp-core]: npm を介してコアエンジンやビルトインテーマを使いやすく
- :tv: [Marp CLI][marp-cli]: Markdown を HTML 、 PDF 、 PPTX 、画像に変換可能
- :vs: [Marp for VS Code][marp-vscode]: 編集中のスライドをライブプレビュー表示
- and more...
---
# スライドの記述のしかた
やり方はとてもシンプルです。ハイフン記号 (e.g. `---`)でページを分割します。
```markdown
# スライド 1
本文
---
# スライド 2
本文
```
---
# Directives
Marp では美しいスライド作成を支援するため、**"Directives"** という拡張構文を用意しています。
Markdown 記法の本文の前に挿入します:
```
---
theme: default
---
```
または本文のどこかに HTML 形式で記述します:
```html
```
https://marpit.marp.app/directives
---
## [グローバル Directives](https://marpit.marp.app/directives?id=global-directives)
- `theme` : テーマを選ぶ
- `size` : スライドのサイズを `16:9` か `4:3` で選択する *(Marpit frameworkを除く)*
- [`headingDivider`](https://marpit.marp.app/directives?id=heading-divider) : 任意の見出しの前にスライドのページ区切りを挿入する
```
---
theme: gaia
size: 4:3
---
# 内容
```
> Marp では以下の [built-in themes in Marp Core](https://github.com/marp-team/marp-core/tree/master/themes#readme) が利用可能 : `default` `gaia` `uncover`.
---
## [ローカル Directives](https://marpit.marp.app/directives?id=local-directives)
スライドページ毎に設定できる値一覧
- `paginate` : `true`でページ数を表示する
- `header` : ヘッダーの内容を指定する
- `footer` : フッターの内容を指定する
- `class` : 現在のスライドにHTMLのクラス設定をする
- `color` : 文字色を指定する
- `backgroundColor` : 背景色を指定する
---
### スポット Directives
ローカル構文は**任意のページとそれ以降のページ**に適用されます。
`_class` のようにアンダーバーと接頭辞を使うことで一つのページに適用できます。
---
### 活用例
このページは [defined in Marp built-in theme](https://github.com/marp-team/marp-core/tree/master/themes#readme) で色彩を反転させています。
```html
```
---
# [画像イメージのための構文](https://marpit.marp.app/image-syntax)
以下のキーワードを使って、画像サイズの変更やフィルターを適用できます
: `width` (`w`) 、 `height` (`h`) 、 CSS のフィルター
```markdown
```
```markdown
```
[resizing image syntax](https://marpit.marp.app/image-syntax?id=resizing-image) と [a list of CSS filters](https://marpit.marp.app/image-syntax?id=image-filters) を指定してください。
 
---
# [背景イメージのための構文](https://marpit.marp.app/image-syntax?id=slide-backgrounds)
`bg` でスライドに背景イメージを設定できます。
```markdown
```
---
## 複数の背景イメージを利用する ([Marpit's advanced backgrounds](https://marpit.marp.app/image-syntax?id=advanced-backgrounds))
Marp では複数の背景イメージを利用できます。
```markdown
```
`vertical` で、アライメントの方向も変更可能です。
---
## [背景を分割する](https://marpit.marp.app/image-syntax?id=split-backgrounds)
Marp では背景を分割する [Deckset](https://docs.deckset.com/English.lproj/Media/01-background-images.html#split-slides) を利用できます。
`bg` + `left` / `right` で背景イメージを配置するスぺースを指定可能です。
```markdown
```
---
## [階層リスト](https://marpit.marp.app/fragmented-list)
Marp ではアスタリスク記号をつけることで、各コンテンツを階層リストとして分類します。 (_**HTML 形式のエクスポートのみ** by [Marp CLI][marp-cli] / [Marp for VS Code][marp-vscode]_)
```markdown
# 箇条書きリスト
- 1
- 2
- 3
---
# 階層リスト
* 1
* 2
* 3
```
---
## 数式の設定 ( [Marp Core][marp-core] のみ)
[KaTeX](https://katex.org/) math typesetting は $ax^2+bc+c$ のように [Pandoc's math syntax](https://pandoc.org/MANUAL.html#math) で利用できます。
$$I_{xx}=\int\int_Ry^2f(x,y)\cdot{}dydx$$
```tex
$ax^2+bc+c$
```
```tex
$$I_{xx}=\int\int_Ry^2f(x,y)\cdot{}dydx$$
```
---
## オートスケーリング ( [Marp Core][marp-core] のみ)
*Several built-in themes* はコードブロックと typesettings でオートスケーリングされます。
```text
Too long code block will be scaled-down automatically. ------------>
```
```text
Too long code block will be scaled-down automatically. ------------------------>
```
```text
Too long code block will be scaled-down automatically. ------------------------------------------------>
```
---
##### ヘッダーの自動調整 ( [Marp Core][marp-core] のみ)は
##### `` のような注釈をヘッダーに入れることで利用可能です。
```html
## Auto-fitting header (only for Marp Core)
```
---
## [CSS テーマ](https://marpit.marp.app/theme-css)
Marp では各スライドのコンテナとして `` を使います。その他は基本の Markdown 記法と同様です。 [Marp CLI][marp-cli] と [Marp for VS Code][marp-vscode] ではカスタムテーマを利用可能です。
```css
/* @theme your-theme */
@import 'default';
section {
/* Specify slide size */
width: 960px;
height: 720px;
}
h1 {
font-size: 30px;
color: #c33;
}
```
---
## [Markdown 記法のスタイル調整](https://marpit.marp.app/theme-css?id=tweak-style-through-markdown)
Markdown 記法の `
Re-painted yellow background, ha-ha.
```
> `section.custom-class { ... }` のように class を活用することで、カスタムスタイルの追加も可能です。
> `` でスタイルを適用します。
---
## [特定範囲へのスタイル適用](https://marpit.marp.app/theme-css?id=scoped-style)
現在のページの特定範囲へスタイルを適用したい場合は `
```
---
# スライド作成を楽しみましょう! :v:
#####  Marp: Markdown — https://marp.app/
###### by Marp チーム ([@marp-team][marp-team])