ゼミ発表用のスライドのテンプレをVS Codeの拡張機能「Marp」を使ってサクッと作っていきたいと思います！
今回はスライドの見た目を整えるためにCSSを適用してみたいと思います。
なおCSSを設定しなくても、Marp独自のCSS（default）が自動で適用されます。しかしこれからは、よりゼミの発表に適したデザインを作っていきたいと思います。
関連記事
CSSを作成する
まずはCSSファイルを作成します。VS Codeでファイルを新規作成して「style.css」で保存します。なおCSSファイル名は任意ですが、本記事では「style」とします。
また、このとき追加したファイルの場所（パス）を覚えておいてください。
CSSとは？
CSSは「Cascading Style Sheets」の略で、基本的にはHTMLファイルで定義したタイトルや本文、画像といった要素の見た目を整える仕様です。Marpでも同様に、Markdownファイルを装飾するために用います。
CSSを編集する
先ほど作った「style.css」を開き、次の文を最初に書きます。
@import "default";
これは、デフォルトのテーマのCSSを取り込む文のようです。これにより、Marp用に既に最適化されたデフォルトテーマをいじるのみでオリジナルなものに仕上げられます。
もし@importなしにすると、すべて一から記述する必要がありとても大変だと思います。
それ以外はふつうのCSSとほとんど同じです。よく使う書き方などは他の記事にまとめたいと思います。
ここでは試しに大見出しの色を変えてみましょう。
h1 {
color: red
}
これでMarkdownファイル中で指定した大見出し（# で始まる文）が赤色の文字になるはずです。
ただし、今直ちには変更されません。次にCSSを適用させる必要があります。
CSSをMarkdownファイルに設定する
CSSで装飾したいスライドを作るMarkdownを用意し、一番最初に下記のように記述します。
「theme: 」には先ほど作成したCSSファイルの名前のみ（パスや拡張子.cssは不要）を入れます。
---
marp: true
theme: style
size: 16:9
---
# 大見出しが赤くなったよ
それ以外はふつうだよ
CSSをVS Codeに設定する
以下の手順で設定を行えばたぶんOKです*1。
- VS Codeを開き、「Ctrl」+「,」で「設定」を開く
- 検索窓で「themes」と打つと、「Markdown › Marp: Themes」という項目が見つかると思います。そこの「項目の追加」ボタンをクリック
- 先ほど作成したcssファイルのパスを指定
Pointファイルの相対パスを指定します。
・ワークスペースで開いている場合
ワークスペースフォルダから見た相対パス
・そうでない場合
Markdownファイルから見た相対パス
また、パス内の\（バックスラッシュ*2）は\\（バックスラッシュ２個）に置き換えます。
これで先ほどのCSSを設定したMarkdownファイルを開くとCSSが設定され、大見出しが赤色文字になっているはずです！
次回は、CSSの実装をしていきたいと思います！
