Marpを用いてオリジナルテーマのスライドを作成する知見をまとめてみた

記事タイトルとURLをコピーする

こんにちは、技術 1 課の水本です。

何度か Marp を使って自作のテーマを作成しつつ、スライドを作る機会を経験しましたので、知見をまとめてみることにしました。 Markdown でスライドを作りたいなと考えている方は参考にしてください。

Marp とは

Marpとは、 Hattori Yuki さんが開発しているスライドシステムであり、以下の特長があります。

  • Markdown で記述できる
  • スタイリングは提供済みテーマ、カスタム CSS、カスタムテーマで変更可能
  • HTML 出力の他、PDF、PPTX 出力が可能
  • VS Code 拡張機能 の他、CLI など提供ツールが豊富
  • パワポ起動しなくていい(最高!!)

利用前

ここからは利用前に関する知見を書き連ねて行きます。

独自テーマを作りたいなら CSS の理解は必須

最初にこれを書いてしまうのはどうかと思いますが、なんだかんだで CSS が書けないとオリジナルのスタイリングは不可能です。

ただしピュアな CSS と同じなので、Bootstrap や のようなクラス型のスタイリングもやれます。私はやったことがないのですが恐らくTailwind CSS もいけるんじゃないでしょうか。

私は基本パーツは CSS で、レイアウト系は Bootstrap を使うようにしています。個人的には SCSS で書きたい・・・

画像を多用するなら圧倒的にパワポで作ったほうが早い

Markdown は文章を書く用途が中心なので、画像を自由な場所に配置するような使い方は元々不向きです。

左右配置や全体にフィット、 といった程度の機能なら Marp にもありますので、まずはそれらに制限してみるのをオススメします。

たとえば 10 個の画像をさながら宇宙の星のように位置指定するのであれば、必然的に画像ごとの 座標をスタイリングするために ID やクラス 割り当てが必要で、

「自分は Markdown を書いていると思ったら、気がついたら HTML タグで囲み続けていた・・・」

なんてことにもなりかねません。

Marp に良さを見いだしている人は、そこが重要ではないと思います。Git 管理が可能になるとか大きいですからね。

基本は VS Code + 拡張機能 で

Marp は様々な利用方法がありますが、基本は VS Code と拡張機能で作るのが楽です。

ただし複数ファイルの一括変換などはできないのと、カスタムテーマが書かれた CSS の設定がややこしいです。

HTML タグが使えるオプションはデフォルトで OFF なので有効にしましょう。私は何だかんだでめっちゃ使ってます。

テーマ作成

いきなり個別 CSS ファイルを作ったりしない

Marp は個別 CSS ファイルを一定のルールで書くことでテーマとして認識させられます。

ただしスタイルが決まってない状態で個別 CSS を作っても面倒なだけなので、まずはドキュメント自体にstyleタグで書いていきましょう。

これが一番楽で、変更もリアルタイムで見やすいです。

デフォルトテーマを継承したほうがいい

CSS の style タグ内先頭で@import 'default';と記述することでデフォルトテーマを継承できます。

<style>
@import 'default';
/* Bootstrap */
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css');
@import url('https://fonts.googleapis.com/css2?family=Kosugi&family=Roboto+Mono&display=swap');
</style>

まずはここからスタイルを上書きするのが良いでしょう。背景色も初期状態で white なので使いやすいです。

もちろん継承せずにゼロから書くこともできますが、いわゆるブラウザのデフォルトスタイリング打ち消しなど、面倒臭いことが多いのではと思います。

テーマカラーは先に宣言しておく

テーマカラーは各スタイルでよく使いますので、宣言しておきましょう。

:root {
  --theme-orange: #f7ab00;
  --theme-red: #d01c31;
}

section h1 {
  font-size: 2.65rem;
  border-bottom: solid 0.25rem var(--theme-orange);
  color: black;
}

body タグへのスタイリングはほぼ効かないと思ったほうがいい

Marp では各ページをsectionタグで囲っており、これがページ毎の最上位に近いです。

通常の Web サイトのコーディングの感じで body へスタイリングしようとすると効いてないことがあります。そのときはsectionを先頭に含めてみてください。

Marp 専用コメントをガンガン使う

Marp には独自機能コメントがあり、例えば以下のようなものがあります。

  • 記述したページだけに適用できる CSS クラス
  • ページネート(ページ番号)の ON/OFF

これらは活用しないと自由なスタイリングはほぼ不可能です。

以下はサンプルで、スライドの目次に特化したスタイルを当てるために個別 CSS クラスを付与、このページだけページネート OFF にしています。

---

<!-- _class: index -->
<!-- _paginate: false -->

![bg fit](./theme/img/image_02.png)

# 目次

1. 基本的な操作方法のご紹介
   - 起動/停止/再起動
   - 接続
2. バックアップ取得、システム廃棄手順のご紹介
   - バックアップ取得方法
   - サーバー廃棄時のデータ消去について
3. 付録

---

どう書いたら良いかわからないスタイリングは潔く他の力を借りる

あまり無理して Marp と CSS で何とかできないかは考えないほうが良いです。

ストレス少なくやるには、時には画像に変換して埋め込む、Bootstrap でサクッと作れないかなどを考えましょう。

私は左右分割の 2 カラムレイアウトなど、Bootstrap を多用しています。

その他

独自スニペットを作ろう

テーマ(スライドデザイン)が固まってあとはコンテンツを書くだけと言っても、Marp はドキュメントの情報など、Markdown とは直接関係のない文字を入れ込むこともあり、これを毎回行うのはなかなか苦痛です。

VS Code では独自スニペットが作れますので活用しましょう。

拡張機能の設定とともに.vscode/settings.jsonに入れておくとチームでの作成が楽になるでしょう。

私は/startで Marp 専用のヘッダ情報、トップページ、目次がセットされた内容が出たりするものを作っています。

  • 他にも/middleで中表紙、/img-w-80だとwidthが 80%のスタイリング付き記述、など。

文字の一部だけ色を変えたい、マーカーのようなスタイルを当てたいなど「囲った文字をスニペットの中に入れたい」というスニペットも書けますが、呼び出し方が異なります。

  • エディタの文中で呼び出さずに、VSCode の機能がコマンドで呼び出せるアレからsnippetと入れて呼び出してください。

おわりに

ポイントとしてはだいたいこんな感じでしょうか。

他にも書けることはあるのですが、社内のパワポスライドを Marp 化するくらいであればこの情報で十分かなと思います。

お読み頂きありがとうございました。

水本 正敏(執筆記事の一覧)

エンタープライズクラウド部 ソリューションアーキテクト1課

国内ITベンダーのカスタマーエンジニアからAWSに魅了されサーバーワークスへ。