セミナー資料の作成に、簡単・手軽、そして検索・バージョン管理が可能なMarpを愛用中です。

タイトルの「Marpでヘッダーを帯表示する方法」は、適切な表現を思いつかなかっただけなのですが、要するに、

• 以下の「本日のテーマ」の部分

のように帯のような表示にしたいということです。

元となるテーマはgaiaを利用

Marpには、最初から用意されているテーマとして、default、gaia、uncoverがあります。

default（何も設定しない場合）

gaia

uncover

縦方向で見たとき、defaultやuncoverは中央寄せ、gaiaは上から並べていく形になっています。

そのため、今回はテーマとしてgaiaを利用し、CSSで装飾を整えていきます。

CSSによる拡張

CSSを拡張する、つまり独自CSSを適用するわけですが、Marp for VSCodeなら「Marpで独自CSSを使う方法」を参考に設定してください。

ただ、たまにMarp for VSCodeで独自CSSが効かない場合があります。私はまさにそのパターンでした😱

その場合は以下を参考にmarp-cliを利用してください。

関連：Marp for VSCodeで独自CSSが効かない場合の対応

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

@import 'gaia';

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

普通のCSSですが、あえて工夫した点を言えば、height: autoで高さを固定していません。

これによって、複数行になった場合でも、帯の高さを自動で確保できます。

ちなみに、資料の本文となるMarkdownは以下のとおり。

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

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

これで以下のような表示になります。

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

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