このテーマの特徴

テーマの特徴:

このカスタムテーマは、以下のような特徴を備えています。

勾配背景: ヘッダーとフッターに、鮮やかなグラデーションの背景を使用しています。
形状のクリッピングパス: ヘッダーとフッターは、波のような形のクリッピングパスで成形されています。
中央揃え: タイトルとコンテンツは、水平方向と垂直方向の両方に中央揃えにされています。
コントラストの高い色: テーマでは、背景とテキストにコントラストの高い色を使用しており、テキストの読みやすさを向上させています。
大規模なフォントサイズ: テキストは、プレゼンテーションの視認性を高めるために、全体的に大規模なフォントサイズを使用しています。
波形の背景: タイトルセクションには、動きと興味を加える波形の背景イメージが使用されています。

このテーマを利用する

CSS

/* @theme custom_theme */
@import default;

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

header {
  width: 100%;
  height: 70pt;
  background: linear-gradient(to right, #500fd2, #6700be);
  color: #ffffff;
  padding: 18pt;
  display: flex;
  justify-content: space-between;
  align-items: center;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%);
  text-shadow: 0px 1px 2px #00000029;
}

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

section.title {
  background-color: #303030;
  color: #ffffff;
  padding: 30pt;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 48pt;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 1600 800' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='wave' patternUnits='userSpaceOnUse' width='1600' height='800'%3E%3Cpath d='M0 0 L0 800 Q572 602 1200 537 Q1600 500 1600 500 L1600 0 L0 0 Z' fill='%23212121' %3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23wave)' %3E%3C/rect%3E%3C/svg%3E");
  background-size: 100% 100%;
}

Marpのサンプル

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

<!--
_class: title
-->

# プレゼンテーションタイトル

---

<style>
.content {
  border: 1px solid black;
  padding: 1em;
  margin: 1em;
}
</style>

## セクション 1

<div class="content">
**問題の定義**
</div>

### セクション 1.1

<div class="content">
**解決策**
</div>

## セクション 2

<div class="content">
**プロジェクトチーム**
</div>

### セクション 2.1

<div class="content">
**実施計画**
</div>

----

## セクション 3

<div class="content">
**測定基準**
</div>

### セクション 3.1

<div class="content">
**質問と回答**
</div>