鮮やかなグラデーションと菱形のヘッダーで洗練されたプレゼンテーション用Marpテーマ

image0 image1

このテーマの特徴

特徴:

  • ヘッダーとフッターのデザイン:

    • ヘッダーとフッターは鮮やかなグラデーション(オレンジから赤)で、菱形の形状になっています。
    • ドロップシャドウがあり、層感があります。
  • タイトルセクション:

    • 黒い背景に白いテキストの大きなタイトルセクションがあります。
    • タイトルは中央に配置され、背景には抽象的な波のパターンがあります。
  • セクションのレイアウト:

    • セクションは縦に並び、36ptの間隔が空いています。
    • テキストのフォントサイズは24ptです。
  • 全体的な美学:

    • テーマはモダンで洗練された印象です。
    • カラーパレット(オレンジと黒)は鮮やかでありながら落ち着いた雰囲気を醸し出しています。

このテーマを利用する

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, #f55a00, #d0021b);
  color: #ffffff;
  padding: 18pt;
  display: flex;
  justify-content: space-between;
  align-items: center;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%);
  box-shadow: 0px 4px 16px #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%);
  box-shadow: 0px -4px 16px #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
-->

# タイトル

---
<!--
_class: body
-->
# 見出し
- これはリスト
- これもリスト


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