このテーマの特徴

テーマの特徴:

1. 洗練されたヘッダー:

ヘッダーは白から薄茶色へのグラデーションで構成され、洗練された印象を与えます。
ロゴは左側に配置され、メニューリンクは右側に配置されています。

2. 明るくて広々としたセクション:

セクションは背景が薄茶色で、テキストが黒で表示され、明るく読みやすい環境を作成しています。
セクション間の十分な空白により、整理され、風通しの良い印象が得られます。

3. ユニークなタイトルセクション:

タイトルセクションは、波のイラストが背景に施され、背景に固定されています。
タイトルテキストは白で表示され、背景のイラストにコントラストを与えます。
このセクションは、プレゼンテーションの開始に視覚的なインパクトを与えます。

4. 伝統的な東洋の要素:

タイトルセクションには、「東洋の庭」というテーマを連想させる東洋風の要素が取り入れられています。
黒く丸い装飾品には、伝統的な日本語の書道のような文字が描かれています。

5. モダンでミニマリストなフッター:

フッターは、白から薄茶色へのグラデーションで構成されています。
テキストは中央揃えで表示され、プレゼンテーションを締めくくる落ち着いた印象を与えます。

全体として、このテーマは、洗練された現代的なデザインと、東洋の美学の伝統的な要素を融合させることで、エレガントで記憶に残るプレゼンテーションを作成するのに適しています。

このテーマを利用する

CSS

/* @theme oriental_garden */
@import default;

section{
  display: flex;
  flex-direction: column;
  gap: 64px;
  font-size: 24pt;
  padding: 48px;
  background-color: #f5f5f5;
  color: #333;
}

header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px;
  background: linear-gradient(to right, #f5f5f5, #ffffff);
  color: #333;
  font-size: 28pt;
  position: relative;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #333;
  font-weight: bold;
}

.logo img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.nav-links {
  display: flex;
  gap: 20px;
  font-size: 18pt;
}

.nav-links a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}

.nav-links a:hover {
  color: #00b4d8;
}

header::after {
  content: "";
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 100%;
  height: 10px;
  background: linear-gradient(to right, #ffffff, #f5f5f5);
}

footer{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: linear-gradient(to right, #333, #f5f5f5);
  color: #333;
  bottom: 0px;
  width: 100%;
  text-align: center;
}

section.title{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23333' fill-opacity='1' d='M0,256L48,224C96,192,192,128,288,128C384,128,480,192,576,224C672,256,768,256,864,224C960,192,1056,128,1152,112C1248,96,1344,128,1392,144L1440,160L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  color: white;
  text-align: center;
  font-size: 36pt;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  position: relative;
}

.oriental-elements {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.oriental-element {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  background: #333;
  color: #ffffff;
  font-size: 24pt;
  border-radius: 50%;
}

Marpのサンプル

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

# oriental_garden

 oriental_garden

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

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

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

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