Markdownからそのままスライド資料を作ることができる「Marp」の使い方・設定を試行錯誤しています。

Markdown + CSSによってスライドを作ることができるMarpの魅力は、何といっても、一度デザイン・構図を設定してしまえば、すべてのスライドに一元的に適用できる点です。

法改正に関する説明資料のように、同じベースを何度も使い回すスライドこそ、こうしたテンプレート化の恩恵を大きく受けることができます。

Marpのデフォルトテーマは上下中央の設定

Marpのデフォルトテーマ（default）では、以下のように、上下中央（縦の中央）に、タイトル・本文が集まる設定になっています。

この場合、文字数・行数によって、見出しの位置がバラバラになるため、なんとなく気持ち悪さが残ります。

過去に作成してきたKeynoteによるスライドのデザインを再現したいですし、見出しの位置は固定したいところ。

きれいな写真を背景に、一言キーワードを書いているスライド資料はかっこいいし、その場合は中央から始まるデフォルトの設定の方が良いのですが。。。

見出しや本文を上詰めに変更するCSSの設定

sectionタグが本文の全体設定になっているため、sectionタグに以下のスタイルを適用すれば、本文を上詰めに変更できます。

section {
    justify-content: start;
}

以下のように、見出しと本文が上詰めになります。

わかりにくいかもしれないので、Before・Afterを載せておきます。

Before

After

Marpではフレックスボックス（flexbox）のレイアウト設定を用いることができます。

フレックスボックスとは、要素を柔軟に並べたり揃えたりできるCSSのレイアウト手法で、justify-contentはその中でも「縦方向（または横方向）の揃え位置」を指定するプロパティです。

見出しの位置がスライドごとにバラバラって、そんなに気になるものなんですか？

地味ですが、実は結構気になるポイントです。見出しの位置が中央寄せのままだと、スライドが変わる度に視線の位置がずれてしまい、聞き手が無意識に読みにくさを感じてしまうんです。上詰めで固定しておけば、内容量に関係なく安定した見た目になります。

ヘッダー・フッターを中央寄せにする

一般的に、CSSで文字をセンタリング（中央寄せ）するときは、

header, footer {
    text-align: center;
}

で良いはずなのですが、Marpではこの設定が効かずにちょっと苦労しました。調べた結果、widthを設定することで解決したのですが、Marpにはちょっと癖があるのかもしれません。

header, footer {
    width: 100%;
    text-align: center;
}

ヘッダーを帯表示にする

ビジネスに用いるスライドでは、以下の「本日のテーマ」の部分のように、ヘッダーを帯のように表示することが一般的です。

Marpには既存のテーマとしてdefault、uncover、gaiaの3つが用意されていますが、

• default・uncoverは縦方向が中央寄せ
• gaiaは縦方向が上詰め

になっているため、帯表示をするときにはgaiaをベースにすると簡単です。

なお、独自CSSの設定方法は以下の記事で解説しています。

関連: Marp for VSCodeで独自CSSが効かない場合の対応（marp-cli）

実際に設定したCSSは以下のとおりです。帯の部分はヘッダーを用いるので、headerにCSSを当てています。

@import 'gaia';

header {
    background-color: green;
    color: #fff;
    font-size: 1.2em;
    font-weight: 700;
    padding: 1rem;
    height: auto;
}

上のコードで工夫した点は、height: autoで高さを固定していないこと。こうすることで、ヘッダーの文章が複数行になった場合でも、帯の高さを自動で確保できます。

なお、上の画像の本文であるMarkdownは以下のとおり。Markdownでスライド資料を作成できる利便性をご理解いただけるかと思います。

<!--
class: slides
_header: 本日のテーマ
_paginate: false
-->

1. Marpとは？
2. Marp for VSCodeで独自CSSが効かない場合はどうすべき？
3. ・・・
4. ・・・
5. ・・・

ヘッダーを帯にするだけで、ビジネスっぽい印象になりますね！

はい。今どのテーマを話しているのかが一目でわかるだけで、聞き手の理解度がぐっと上がります。しかも一度テンプレートを作ってしまえば、次回以降はMarkdownの本文を書き換えるだけで同じデザインの帯が自動で付きます。資料ごとに見た目を揃えられるので、事務所としての一貫したブランディングにもつながります。

まとめ

Marpの本文レイアウトについて、ここまでの流れを整理すると以下のとおりです。

• Marpのデフォルトテーマは上下中央寄せだが、section { justify-content: start; }で上詰めに変更できる
• ヘッダー・フッターを中央寄せにする場合は、text-align: center;だけでなくwidth: 100%;もあわせて設定する
• ヘッダーを帯表示にすると、資料のテーマが一目でわかりやすくなる。帯表示には縦方向が上詰めのgaiaをベースにすると簡単

Marpでは、自分流のテンプレートを一度作っておけば、あとは内容に集中できます。

「楽をするために徹底的に努力する」——CSSの調整に多少時間がかかっても、一度テンプレート化してしまえば、その後の資料作成は「ほどほど」の労力で済むようになります。これもまた、一人社労士が時間という資源を賢く使うための工夫のひとつです。

参考：Marpで研究発表スライドを作る 〜Beamerを卒業しよう〜