Work Life Fun

仕事も人生も楽しむ社労士

Marpで独自CSSを使う方法

※当サイトはリンクに広告ページが含まれている場合があります

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

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

Marpに最初から用意されているテーマ

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

テーマを適用する場合は、以下のように「theme: XXX」と追加するだけです。

ちなみに、何も設定をしなければ、defaultが適用されます。

---
marp: true
theme: gaia
---

default(何も設定しない場合)

gaia

uncover

Marpで独自CSSを使う方法

3つのテーマでも十分ですが、独自のデザインにしたいときもあります。

CSSを自作し、適用するだけで良いので、デザインの自由度が上がりますし。

自作したCSSを適用するためには、VSCodeの「settings.json」に追記が必要です。

具体的な方法は以下のとおりです。

  1. VS Codeの「Code -> Preferences -> Settings」、Macの場合は「⌘(Command) + ,(コンマ)」で、設定画面(Settings)を開きます。
  2. 以下のように検索窓に「markdown.marp.themes」と入力します。
  3. 「Add Item」ボタンを押し、適用するCSSファイルの場所(今回は「./marp-themes/test.css」)を指定すれば完了です。

Marpで独自CSSが適用されているか確認

作成した自作テーマ「test.css」を適用するために、以下のように「theme: test」と記載します。

---
marp: true
theme: test
---

defaultのテーマをベースに、

  • 見出しの部分を緑
  • フッターを中央揃え

にしただけですが、以下のようにちゃんと自作テーマ(test.css)が適用されていることがわかります。簡単ですね。

追記

原因はわかりませんが、Marp for VSCodeでいくら設定しても独自CSSが効かない場合があり、その場合の対応方法を記事にしました。

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

【無料】効率的に人事労務の情報を入手しませんか?
  • 毎年のように改正される労働法令への対応に頭を悩ませている
  • 総務や経理などの他の業務を兼務しているので、人事労務業務だけに時間を割けない

といった悩みを抱える企業の経営者・人事労務担当者向けに、公開型のブログでは書けない、本音を交えた人事労務に関する情報・ノウハウ、時期的なトピックに関するメールマガジンを「無料」で配信しています。

過去の配信分は公開しません。

情報が必要な方は、いますぐ以下のフォームから購読の登録をしてください。購読して不要と思ったら簡単に解除できますのでご安心ください。


up_line