エレガントでカーブしたセクション

image0 image1

このテーマの特徴

エレガントカーブテーマの特徴:

洗練されたカラーパレット: * ヘッダーとフッターは、濃い紫色 (#6441A5) から明るい紫色 (#2A0C43) へのグラデーションで、洗練された印象を与えます。

カーブしたセクション: * セクションは、上部に丸みのある曲線で、視覚的に魅力的で、プレゼンテーションに流れるような動きを加えます。

コントラストの効いたフォント: * 白地に黒のテキストを使用することで、見やすくインパクトのあるプレゼンテーションを作成できます。

広々としたレイアウト: * セクション間には十分な余白があり、コンテンツを明確に整理し、読みやすくします。

目立つタイトルスライド: * タイトルスライドは、ベージュ色の背景に濃い茶色のテキストを使用しており、プレゼンテーションのメイントピックを強調しています。 * 丸みを帯びた境界線と中央揃えにより、視覚的な魅力が向上します。

このテーマを利用する

CSS

/* @theme elegant_curve */
@import default;

section {
  display: flex;
  flex-direction: column;
  gap: 36pt;
  font-size: 24pt;
}

header {
  width: 100%;
  height: 70pt;
  background: linear-gradient(to right, #6441A5, #2A0C43);
  color: #ffffff;
  padding: 18pt;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0px 4px 16px #00000029;
  clip-path: polygon(0 100%, 100% 100%, 100% 0%, 50% 0);
}

footer {
  width: 100%;
  position: fixed;
  padding: 12pt;
  background: linear-gradient(to right, #2A0C43, #6441A5);
  color: #ffffff;
  bottom: 0pt;
  display: flex;
  justify-content: center;
  gap: 10pt;
  box-shadow: 0px -4px 16px #00000029;
  clip-path: polygon(0 0%, 100% 0%, 100% 100%, 50% 100%);
}

section.title {
  background-color: #F4F1DE;
  color: #333333;
  text-align: center;
  font-size: 48pt;
  padding: 50pt 30pt 70pt;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30pt;
}

Marpのサンプル

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

# タイトル

---
<!--
_class: normal
-->

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