このテーマの特徴
特徴:
ヘッダーとフッターのデザイン:
- ヘッダーとフッターは鮮やかなグラデーション(オレンジから赤)で、菱形の形状になっています。
- ドロップシャドウがあり、層感があります。
タイトルセクション:
- 黒い背景に白いテキストの大きなタイトルセクションがあります。
- タイトルは中央に配置され、背景には抽象的な波のパターンがあります。
セクションのレイアウト:
- セクションは縦に並び、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 --> # 見出し - これはリスト - これもリスト --- # 見出し - これはリスト - これもリスト