このテーマの特徴
Cosmic Nights テーマの特徴
この Marp テーマは、宇宙の夜空を彷彿とさせるダークで幻想的な雰囲気を醸し出しています。
- 深いグラデーション背景: セクションの背景は、濃い青から明るい青へとグラデーションされており、星空の広がりを表現しています。
- 明るい文字: 背景の暗さに映える白色の文字は、視認性を確保しながら、雰囲気を損なうことなくコンテンツを強調しています。
- タイトルセクション: 壮大な背景画像が印象的なタイトルセクションは、大文字で太字のタイトルが中央に配置され、舞台のような効果を生み出します。
- 目立つ見出し: コンテンツセクションの見出しは、青で強調されており、重要なポイントを視覚的に際立たせ、読みやすさを向上させています。
- 特徴的なリスト項目: リスト項目は、青の背景と白色の文字でデザインされており、星空に浮かぶ小惑星のように見えます。
全体として、Cosmic Nights テーマは、暗く瞑想的な雰囲気の中で、視覚的なインパクトと読みやすさを兼ね備えた、印象的で魅惑的なプレゼンテーションを作成するのに最適です。
このテーマを利用する
CSS
/* @theme Cosmic Nights */ @import default; section { display: flex; flex-direction: column; font-size: 24pt; padding: 20px; background: linear-gradient(to top, #000428, #004e92); color: #fff; } header { display: flex; justify-content: space-between; align-items: center; height: 60px; background: #000428; color: #fff; font-size: 18pt; font-weight: bold; } footer { width: 100%; position: fixed; padding: 10px; background: #000428; color: #fff; bottom: 0px; text-align: center; font-size: 14pt; } section.title { padding: 100px 0; text-align: center; background: url("https://images.unsplash.com/photo-1594086654669-b05c7bb9903c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80") no-repeat center center; background-size: cover; color: #fff; font-size: 48pt; font-weight: bold; display: flex; justify-content: center; align-items: center; text-shadow: 0px 0px 20px #004e92; gap: 20px; } section.content { background: #000428; color: #fff; padding-top: 60px; } section.content h2 { font-size: 36pt; font-weight: bold; margin-bottom: 10px; color: #004e92; text-shadow: 0px 0px 10px #000; } section.content ul { list-style-type: none; padding: 0; display: flex; flex-wrap: wrap; gap: 20px; } section.content li { background: #004e92; color: #fff; padding: 10px; border-radius: 5px; font-size: 18pt; width: 200px; text-shadow: 0px 0px 5px #000; } section.content p { font-size: 18pt; margin-bottom: 20px; color: #fff; text-shadow: 0px 0px 5px #000; } body::-webkit-scrollbar { width: 10px; } body::-webkit-scrollbar-track { background: #000428; } body::-webkit-scrollbar-thumb { background: #004e92; }
Marpのサンプル
--- marp: true theme: Cosmic Nights header: " " footer: " " --- <!-- _class: title --> # Cosmic Nights --- <!-- _class: content --> # 見出し - これはリスト - これもリスト