【Marp】Markdownで手軽に編集しやすいスライドを作ろう！導入~CSS適用までの解説
この記事を読んで実際にMarpを試してみたら、思ってた以上に使い勝手が良かったので、メリットや導入~作成の手順をまとめてみました。
はじめに - Marpを使うメリット
Marpを使ってスライドを作るメリットは、大きく以下の3つかなと思います。
1. すぐに作れて再編集しやすい
2. 構造を意識してスライドが作れる
3. 使いまわせる
すぐに作れて再編集しやすい
なんといってもテキストを打ち込んでいくだけでスライドの形になるのはとても楽です。
レイアウトのことなどは考えなくていいし、ある程度制約があるからこそ「つい凝りすぎて中身より見た目に時間がかかっちゃう」みたいなことが起こりません。
後から直すときも、レイアウトなどは考えずテキストを変更していくだけなので、良い意味で見た目を気にせず内容にフォーカスできます。
構造を意識してスライドが作れる
Markdown記法でスライドを作ることで、見出し構造を意識するようになります。
スライドを作っていると、つい「今作っている1枚」に集中してしまい、全体感を把握しにくくなりますが、そういうことが起こりにくいです。
使いまわせる
一度作ったテーマやスライドの使い回しがやりやすいです。
他のスライド作成ツールでももちろんできますが、1行追加するだけやテキストをコピペするだけというのがとても楽です。
⓪導入 - VS Codeをインストールする
早速実際にMarpを使ってスライドを作成する方法を紹介します。
この記事ではVS Codeの拡張機能でMarpを使う方法を紹介するので、CLIで使いたい方は公式サイトをご覧ください！
VS Codeがインストールされていない場合は、公式サイトからインストールできます。
①導入 - VS CodeでMarpを使えるようにする
①-1 Marp for VS Code を有効化する
まずはVS CodeでMarpを使えるようにします。
VSCodeの拡張機能 Marp for VS Codeを有効化します。
①-2 mdファイルを作成し、先頭に`marp: true`と記載する
適当なMarkdownファイルを作成し、ドキュメントの先頭に`marp: true`と記載します。
---
marp: true
---①-3 mdファイルのプレビューを表示する
mdファイルの右上に表示されている虫眼鏡アイコンの「プレビューを横に表示」というボタンをクリックすると、Markdownのプレビューを表示できます。
スライドの状態でプレビューが表示されたら無事最初のステップは完了です！
②Marpを使ってスライドを作る
基本はMarkdown記法でドキュメントを作成していきます。
②-1 ---でページの区切りを入れる
ページの区切りを入れたい箇所に、区切り線である「---」を入れます。
スライド1
---
スライド2
---
スライド3
こんな感じで、「---」を入力した箇所でページが区切られます。
②-2 画像の挿入
画像を挿入する際は、パスで指定します。
こんな感じでスライドごとにディレクトリを分けて、imagesフォルダを作成して中に画像を格納していくと追加や修正がしやすいです。
└─ 202308_hoge/
├─202308_hoge.md
└─ images/
└─ hoge.png格納した画像は、相対パスで呼び出すことができます。
②-3 画像のサイズを変えたりレイアウトを変更する
画像の編集をしたいときは、「Image syntax」を使います。
ここではいくつか、私がよく使う記法を紹介します。
詳細は公式ドキュメントを参照してください。
画像のサイズを変更する
横幅を指定したいときは「w:」高さを指定したいときは「h:」の後ろに数値を指定すると、pxでサイズ指定ができます。
スペースで区切って横幅と高さを同時に指定することもできます。
 <-- 横幅200px -->
 <-- 高さ100px -->
 <-- 横幅200px 高さ100px -->画像を背景に配置する
スライドの背景画像として画像を配置したいときは、「bg」と指定します。スペースで区切って「x%」のようにサイズを指定することもできます。
 <-- 背景に画像を配置 -->
 <-- 背景に80%のサイズで画像を配置 -->
画像をスライドの右（左）に配置する
スライドの片側に画像を配置したいときは「bg」の後ろにスペースで区切って「left」または「right」と指定します。さらに%でサイズを指定することもできます。
 <-- スライド左側に画像を配置 -->
 <-- スライド右側に30%の横幅で画像を配置 -->
②-4 ヘッダーやフッターを追加する
スライドの上部にヘッダーや下部にフッターを追加することができます。
ヘッダーを指定したいときは「<!-- header: "ヘッダーに表示するテキスト" --->」、フッターを指定したいときは「<!-- footer: "フッターに表示するテキスト" --->」のように記載します。
<!-- header: "自己紹介" ---> ヘッダーを指定
<!-- footer: "©︎kabechiyo" ---> フッターを指定アンダースコアを前につけて「_header:」「_footer:」のようにするとそのスライドのみに適用されます。
アンダースコアをつけない場合は、指定した場所以降の全てのスライドに適用されます。
<!-- header: "自己紹介" ---> これ以降の全てのスライドに適用
<!-- _footer: "©︎kabechiyo" ---> 指定したスライドのみに適用②-5 スライドのスタイルを変更する
背景色と文字色も同じような記述で変更できます。
<!--
_backgroundColor: black
_color: white
-->詳細は公式ドキュメントをご覧ください。
③スライドのテーマを変更する
Marpにはデフォルトで用意されているテーマや、公開されているテーマがあります。
デフォルトのテーマは、ファイルに1行追加するだけで簡単に使用できます。
---
marp: true
theme: gaia
---
Marpで使えるテーマは以下の記事で詳しく紹介されています。
④CSSを変更する
デフォルトのテーマではなく自分の好きなデザインにしたい！という場合は、CSSを書くことができます。
手っ取り早く今作っているスライドだけスタイルを変えたい場合は、インラインでスタイルを記述することができます。
styleタグで囲ってCSSを書くだけです。
特定のページにだけスタイルを当てたい場合は、そのスライド内に<style scopeed>…</style>のように記述をつけます。
ただ、複数のスライドで跨って使うようなテーマを作りたい場合は、後述のcssファイルを読み込む方法がおすすめです。
⑤使いまわせるオリジナルのテーマを作る
前項のインライン記述とは違い、csssファイルを作成してスライドに読み込むこともできます。
⑤-1 cssファイルを作成する
まずは適当な場所にcssファイルを作成します。
自分はMarpフォルダの下に「themas」というディレクトリを作成し、そこに作成しています。
Marp/
└─ themas/
└─ original.md
└─ slides
└─ 202308_hoge/
├─202308_hoge.md
└─ images/
└─ hoge.png⑤-2 作成したcssファイルを読み込めるようにする
cssファイルを作成したら、Marpで使えるように読み込みをします。
ユーザー設定を開いて「Markdown › Marp: Themes」と検索すると、読み込ませたいCSSのパスを指定する設定項目が表示されます。
「項目の追加」を選択し、「themes/original.css」のようにパスを指定します。
⑤-3 作成したcssファイルをスライドで読み込む
スライドをCSSで読み込む際には、cssファイルで名前を設定し、それを適用させます。
まずcssファイルの先頭に「/* @theme original */」のように記載します。
次に、mdファイルの先頭の「marp: true」の後ろに「theme: original」と記載します。
これでスライドにスタイルが適用されるようになりました。
⑤-4 CSSを書いていく
0からスタイルを書くのは結構大変なので、defaultのテーマなどをimprtして、必要な部分だけオーバーライドしていくのがおすすめです。
/* @theme original */
@import 'default';
section {
background-color: #f5f6f6;
color: rgba(0, 0, 0, 0.96);
font: "noto-sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 1600px;
height: 900px;
}終わりに
詳細な情報や最新の情報は公式サイトでご確認お願いします！