このテーマの特徴
宇宙的な冒険のテーマ
このテーマは、宇宙をテーマにしたスタイリッシュで印象的なプレゼンテーションを作成するのに最適です。
特徴:
- 暗闇の中での明るさ:黒く深みのある背景に、白いテキストが映え、プレゼンテーションが際立ちます。
- 宇宙を連想させる配色:ヘッダーとフッターの濃い紫色と、タイトルセクションの明るい紫色が、宇宙空間にいるような雰囲気を演出します。
- 目立つセクション:タイトルセクションは、鮮やかな紫色を背景に白く大きな文字で設定され、重要なセクションに注意を引きます。
全体として、このテーマは、宇宙に関するトピックのプレゼンテーションや、印象的で記憶に残る視覚体験を求めるプレゼンターに適しています。
このテーマを利用する
CSS
/* @theme cosmic_adventure */ @import default; section { background: #000428; color: #ffffff; padding: 20px; font-size: 24pt; line-height: 1.5; } header { display: flex; justify-content: space-between; align-items: center; background: #000046; color: #ffffff; padding: 10px 20px; position: fixed; top: 0; left: 0; width: 100%; z-index: 10; } footer { display: flex; justify-content: center; align-items: center; background: #000046; color: #ffffff; padding: 10px; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 10; } section.title { background: #000063; color: #ffffff; padding: 54px; text-align: center; font-size: 36pt; display: flex; flex-direction: column; justify-content: center; } section.title::before { content: ""; display: block; width: 140px; height: 140px; border: 6px solid #ffffff; border-radius: 50%; margin: 0 auto 20px; animation: spin infinite 20s linear; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHBhdGggZD0ibTMzLjUgMjYuNXM1LjEgMTQuNyAyNC4yIDIxLjkgNDAuNCAxOC45IDU4LjQgMTguOWMwIDAgMjUtOS4zIDQzLjMtMjUuMiAzNy4xLTE1LjEgNjEuOC00Mi4yIDYxLjgtNTEuOGwtLjItNzcuN3MzOS43IDkuMyA0NC41IDI3IDMyLjggNTAuMiAxMS42IDY3LjUtMTkuMyAyMS44LTM4LjkgMjEuOC00Mi42IDAtNzcuNS0zNC4zLTc3LjUtNzEuOSAwLTI1LjEgMTAuNS00Ny40IDMwLjQtNTkuNyA1MC4zLTU5LjkgNDAuNiAwIDc1LjEgMzguMyA3NS43IDc3LjEgMzUuOCA3Ny4xIDcyLjcgMCA0MS45LTI4LjkgNzAuMi01OS43IDQ4LjItNzcuOCAzMi43LTc3LjggNzAuNmwuNyA3Ny4yLTQzLjkgOS4zLTI1LjMgNTAuMy0xMS43IDY3LjkgMzguMyAyMS44IDc3LjQgMjEuOCA0Mi42IDAgNzcuNi0zNC4zIDc3LjYtNzEuOCAwLTI1LjEgLTEwLjUtNDcuNCAzMC40LTU5LjcgNTAuMy01OS44IDQwLjYgMCA3NS4xIDM4LjMgNzUuOCA3Ny4xIDM1LjggNzcuMSAzNy44IDAgNDEuOS0yOC45IDcwLjItNTkuNyA0OC4yIDc3LjggMzIuNyA3Ny44IDcwLjZ6bS00LjYgMTIuNWMtMjguOC0xNC40LTU0LjQtMjMuMi03MS44LTI3LjVjLTQuNi0xLjItOC4zLTIuNC0xMS41LTIuNGMtMy4xIDAtNS43IDEuMS03LjkgMi43Yy0yLjEgMS41LTIuOSAzLjQtMi45IDUuOXYxMC4xbDIwLjggOC44YzIuMi45IDQuNSAyIDYuOCAyYzIuNC4xIDQuOC0uMyA3LjEtMS42YzEuNS0uOSAxLjktMi4yIDEuOS0zLjV2LTcuNGwtMjAuMS04LjljLTIuNy0xLjItNS42LTIuNS04LjUtMi41em0tMjIuOSAyMS41Yy0zLjEgMC01LjgtMS4zLTguMS0zLjljLTIuMi0yLjYtMy4zLTVuNi4xLTExLjhjMi44LTEuNCA1LjYtMi4xIDguNS0yLjFjMy4xIDAgNS44IDEuMyA4LjEgMy45YzIuMiAyLjYgMy4zIDV2Ni4xYy0yLjggMS40LTUuNiAyLjEtOC41IDIuMXpNMzIuMiA0MWMzLjEgMC01LjctMS4yLTguNS0zLjljLTIuOC0yLjctNC4zLTYuOS00LjMtMTJ2LTEuNWMxLjYgMy45IDQuNiA3IDguNSA3YzMuMSAwIDUuNy0xLjIgOC41LTMuOWMyLjgtMi43IDQuMy02LjkgNC4zLTEydjEuN3oiIHN0eWxlPSJmaWxsOiNmZmZmZmYiLz48L3N2Zz4='); } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } section.title h1 { font-size: 48pt; margin: 0; }
Marpのサンプル
--- marp: true theme: custom_theme header: " " footer: " " --- <!-- _class: title --> # slide_1 --- <!-- _class: section-1 --> # slide_2 - これはリスト - これもリスト --- <!-- _class: section-2 --> # slide_3 - リスト - リスト --- <!-- _class: section-3 --> ## 見出し - リスト - リスト ---