パステルカラーで穏やかな雰囲気を演出するMarpテーマ

このテーマの特徴

パステル・バイブス

このMarpテーマは、パステルカラーの柔らかい色調を特徴としています。

主な特徴：

• 背景： 背景色は淡いクリーム色で、軽やかな雰囲気を醸し出します。
• ヘッダー： ヘッダーは明るいパステルピンクからパステルブルーのグラデーションで、タイトルを目立たせます。
• フッター： フッターもパステルブルーと紫のグラデーションで、プレゼンテーション全体をまとめています。
• セクションタイトル： セクションタイトルは、パステルピンクの背景に太字のテキストを使用し、各セクションの重要性を強調しています。
• セクションコンテンツ： セクションのコンテンツは、読みやすい24ポイントのフォントを使用し、明確な階層構造を保ちます。
• 全体的な雰囲気： このテーマは、柔らかく穏やかな色調で、リラックスした雰囲気のプレゼンテーションに適しています。

このテーマを利用する

CSS

/* @theme pastel_vibes */
@import default;

section{
  background-color: #f5f5f5;
  font-size: 24pt;
}

header{
  width: 100%;
  background: linear-gradient(to right, #f8bbd0, #f4c2c2);
  color: #404040;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  font-size: 30pt;
  font-weight: bold;
}

footer{
  width: 100%;
  position: fixed;
  padding: 20px;
  background: linear-gradient(to right, #e0c3fc, #8ec5fc);
  color: #404040;
  bottom: 0px;
  text-align: center;
  font-size: 14pt;
  font-weight: bold;
}

section.title{
  background-color: #f8bbd0;
  color: #404040;
  padding: 60px 40px;
  text-align: center;
  font-size: 36pt;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

section.title h1{
  font-size: 48pt;
  font-weight: bold;
}

section.title p{
  font-size: 24pt;
  font-weight: normal;
}

.button{
  background-color: #e0c3fc;
  color: #404040;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16pt;
  font-weight: bold;
  text-decoration: none;
}

.button:hover{
  background-color: #8ec5fc;
  color: #404040;
}

Marpのサンプル

---
marp: true
theme: pastel_vibes
header: " "
footer: " "
---
<!--
_class: title
-->

# パステルカラーのテーマ

---
<!--
_class: section
-->

## 見出し
- これはリスト
- それもリスト