このテーマの特徴

「sakura_night」というMarpテーマの特徴

背景と色: * パステルピンク(#f5a8a8)と水色(#b3d6d6)のグラデーション背景を使用しています。 * テキストの色は黒(#282828)で読みやすくしています。

レイアウト: * ヘッダーとフッターは固定され、プレゼンテーション全体で表示されます。 * セクションには十分なパディングがあり、コンテンツが読みやすくなっています。

タイトルセクション: * タイトルセクションは、桜の花びらを模したピンクと水色のグラデーションのボーダー付きの円形のアイコンで装飾されています。 * タイトルのフォントサイズは大きく(36pt)、中央揃えで表示されます。

その他の特徴: * フォントサイズは全体を通して24ptに設定されており、読みやすいプレゼンテーションとなっています。 * 行間は1.5に設定されており、テキストの可読性を向上させています。 * 全体として、このテーマは柔らかくて落ち着いた印象を与え、プレゼンテーションに洗練されたプロフェッショナルな雰囲気を与えます。

このテーマを利用する

CSS

/* @theme sakura_night */
@import default;

section {
  background: linear-gradient(to right, #f5a8a8, #b3d6d6);
  color: #282828;
  padding: 48px;
  font-size: 24pt;
  line-height: 1.5;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to right, #f5a8a8, #b3d6d6);
  color: #282828;
  padding: 20px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to right, #b3d6d6, #f5a8a8);
  color: #282828;
  padding: 10px;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

section.title {
  background: #f7f1f1;
  color: #282828;
  padding: 48px;
  text-align: center;
  font-size: 36pt;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 20px;
}

section.title::before {
  content: "🌸";
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border: 4px solid #b3d6d6;
  border-radius: 50%;
  background: linear-gradient(to right, #f5a8a8, #b3d6d6);
  margin: 0 auto 20px;
}

section.title h1 {
  font-size: 36pt;
  margin: 0;
}

Marpのサンプル

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

# Sakura Night

---
<!--
_class: agenda
-->

## アジェンダ
- テーマの概要
- 色とフォント
- レイアウトとコンテンツ
- カスタマイズとターゲットオーディエンス

---
<!--
_class: team
-->

## チーム紹介
- John Smith
- Jane Doe
- Michael Jones

---
<!--
_class: data
-->

## データとチャート

[グラフやチャートを挿入]

---
<!--
_class: conclusion
-->

## 結論と行動喚起
- プレゼンテーションをまとめる
- 行動を促す

---
<!--
_class: appendix
-->

## 付録
- 追加情報やリソース