【Marp】スライドにCSSを適用する手順 - 理系のおともの備忘録

ゼミ発表用のスライドのテンプレをVS Codeの拡張機能「Marp」を使ってサクッと作っていきたいと思います！

今回はスライドの見た目を整えるためにCSSを適用してみたいと思います。
なおCSSを設定しなくても、Marp独自のCSS（default）が自動で適用されます。しかしこれからは、よりゼミの発表に適したデザインを作っていきたいと思います。

まずはCSSファイルを作成します。VS Codeでファイルを新規作成して「style.css」で保存します。なおCSSファイル名は任意ですが、本記事では「style」とします。

また、このとき追加したファイルの場所（パス）を覚えておいてください。

CSSは「Cascading Style Sheets」の略で、基本的にはHTMLファイルで定義したタイトルや本文、画像といった要素の見た目を整える仕様です。Marpでも同様に、Markdownファイルを装飾するために用います。

先ほど作った「style.css」を開き、次の文を最初に書きます。

@import "default";

これは、デフォルトのテーマのCSSを取り込む文のようです。これにより、Marp用に既に最適化されたデフォルトテーマをいじるのみでオリジナルなものに仕上げられます。
もし@importなしにすると、すべて一から記述する必要がありとても大変だと思います。

それ以外はふつうのCSSとほとんど同じです。よく使う書き方などは他の記事にまとめたいと思います。

ここでは試しに大見出しの色を変えてみましょう。

h1 {
  color: red
}

これでMarkdownファイル中で指定した大見出し（# で始まる文）が赤色の文字になるはずです。

ただし、今直ちには変更されません。次にCSSを適用させる必要があります。

CSSで装飾したいスライドを作るMarkdownを用意し、一番最初に下記のように記述します。
「theme: 」には先ほど作成したCSSファイルの名前のみ（パスや拡張子.cssは不要）を入れます。

---
marp: true
theme: style
size: 16:9
---

# 大見出しが赤くなったよ
それ以外はふつうだよ

以下の手順で設定を行えばたぶんOKです。

これで先ほどのCSSを設定したMarkdownファイルを開くとCSSが設定され、大見出しが赤色文字になっているはずです！

2024/6/8 追記：

上記手順を見直して更新しました。
たまに、この方法で設定されない不具合があるようで、ネットで散見されます。詳しい解決方法はわかり次第記事にしたいと思います。
原因の１つを見つけたため記事を更新しました。詳しくは複数のCSSを使い分けるへ。
下記を追記しました。

CSSファイルをいくつか作り、MarkdownファイルによってCSSを使い分けたい場合があるかもしれません。その場合の適用方法です。

重要なのは、ワークスペース1つにつき1つのCSSを適用できることです！

「設定」の「Markdown › Marp: Themes」にCSSのパスを記述しますが、実は1つのCSSしか認識しないようです。

そのため、1つのワークスペースごとに1つのCSSを適用することで複数のCSSを使い分けることが可能になるようです...

例えば、

といった用途別のCSSを用意し、ワークスペースごと切り替えるのが良いのかもしれません。

次回は、CSSの実装をしていきたいと思います！

*1:webサイトのフォントの仕様上、円マークで表示されてしまうことがありますが、恐らくVS Code上ではバックスラッシュで表示されると思います。

理系のおともの備忘録