このテーマの特徴

Serenity Blossom テーマの特徴

この CSS テーマは、以下のような特徴を持っています。

全体的な色合い: 柔らかなベージュとパステルブルーを基調としており、穏やかで落ち着きのある雰囲気を演出します。
レイアウト: セクションが縦方向の列で構成され、情報がすっきりと整理されています。
タイトルセクション: 背景がグラデーションになっており、中央にタイトルと説明文を表示できます。
強調表示要素: 引用ブロックやコードブロックは、視覚的に区別されています。引用ブロックは左端に境界線が引かれ、コードブロックは淡い黄色の背景色になっています。

このテーマは、プレゼンテーションに洗練されたプロフェッショナルな印象を与えるのに適しています。ベージュとブルーの色合いが、特に技術的なトピックやビジネス関連のプレゼンテーションによく合います。

このテーマを利用する

CSS

/* @theme Serenity Blossom */
@import default;

section {
  display: flex;
  flex-direction: column;
  padding: 48px 32px;
  font-size: 24pt;
  background-color: rgb(245, 243, 240);
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 32px 0;
  background: linear-gradient(to right, #d0d3d4, #e7e9ea);
  color: #4a5568;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px;
  background: #4a5568;
  color: #e7e9ea;
  position: fixed;
  bottom: 0;
}

section.title {
  background: linear-gradient(to top, #e7e9ea, #cdc7bf);
  color: #4a5568;
  text-align: center;
  font-size: 30pt;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 48px;
}

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

section.title p {
  font-size: 20pt;
}

/* Additional styles for specific elements */
blockquote {
  border-left: 4px solid #4a5568;
  padding-left: 16px;
  margin-left: 16px;
}

code {
  background-color: rgb(245, 245, 245);
  padding: 4px 8px;
}

Marpのサンプル

---
marp: true
theme: custom_theme
header: " "
footer: " "
---

<!--
_class: title
-->
# Serenity Blossom

## プロフェッショナルで洗練された、信頼感のあるスライドテーマ

---
<!--
_class: section
-->
# 見出し

## サブセクション
- これはリスト
- これもリスト
- さらにリスト

---
<!--
_class: section
-->
## データの視覚化

このグラフは、データの視覚化の例です。