このテーマの特徴
エメラルド・エレガンスのテーマの特徴:
全体的なデザイン: * 全体的に白を基調としたエレガントなデザイン。
スライドセクション * セクションごとに異なる背景色を使用。 * タイトルスライドは緑色と白のグラデーションで、インパクトを与える。 * テキストのフォントサイズは大きく、読みやすい。
装飾: * タイトルスライドに、緑色の葉の模様が背景に重ねられている。 * テキストに影が追加され、奥行きが演出されている。
このテーマを利用する
CSS
/* @theme emerald_elegance */ @import default; section { display: flex; flex-direction: column; font-size: 24pt; background-color: #ffffff; } header { width: 100%; background: linear-gradient(to right, #00665e, #008070); color: #ffffff; top: 0px; height: 60px; padding: 10px 20px; font-size: 36pt; display: flex; justify-content: space-between; align-items: center; gap: 20px; box-shadow: 0px 2px 4px #00000029; z-index: 999; } footer { width: 100%; position: fixed; padding: 10px 20px; background: linear-gradient(to right, #008070, #00665e); color: #ffffff; bottom: 0px; display: flex; justify-content: center; align-items: center; gap: 10px; box-shadow: 0px -2px 4px #00000029; } section.title { background-color: #00997f; color: #ffffff; padding: 40px 20px; text-align: center; font-size: 48pt; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg%3E%3Cpath d='M0 50 C 50 0 50 100 100 50' fill='%23008070' /%3E%3Cpath d='M20 10 C 28 18 37 25 50 30 C 63 35 72 40 80 50 C 88 60 92 70 100 80 C 100 90 90 95 70 100 C 40 90 20 60 20 10' fill='%23006e60' /%3E%3C/g%3E%3C/svg%3E"); text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); } section.title footer { position: relative; margin-top: auto; }
Marpのサンプル
--- marp: true theme: custom_theme header: " " footer: " " --- <!-- _class: title --> # タイトル ページ --- <!-- _class: section --> # 見出し - これはリスト - これもリスト --- # 別の見出し - さらにリスト - おまけのリスト