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

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

デフォルトは上下中央の設定

Marpのデフォルトの設定では、以下のように、上下中央（縦の中央）に、タイトル・本文が集まります。

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

今まで作成してきたKeynoteのデザインを再現したいですし、見出しの位置は固定したいところ。

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

本文を上詰めに変更するCSSの設定

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

section {
    justify-content: start;
}

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

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

Before

After

今回調べてみて知ったのですが、フレックスボックス（flexbox）のレイアウト設定になっているんですね。

ちなみに、justify-content: center; とすれば、デフォルトと同じように中央寄せになります。

参考：Marpで上詰めにする方法