宇宙の探求をテーマにした漆黒の配色と星屑のような背景のMarpテーマ

このテーマの特徴

特徴:

• 漆黒の宇宙をテーマにした配色: セクションの背景色は #020024 の漆黒で、ヘッダーとフッターは #050438 のやや濃い青です。この配色により、宇宙の深さと広大さが表現されています。

• タイトルセクション:

  • 背景に青と紫のグラデーションを使用し、宇宙の神秘性を演出しています。
  • 中央揃えのテキストと大きなフォントサイズで、タイトルを強調しています。

• 星屑を思わせる背景: タイトルセクションの背景画像には、青と紫のグラデーションをシミュレートした星屑のようなパターンを使用しています。

• シンプルで読みやすいフォント: テキストのフォントサイズが大きく、読みやすく、フォントはシンプルで視覚的な雑音を最小限に抑えています。

• セクションの構造: セクションは垂直に配置され、48px の間隔で区切られています。これにより、コンテンツが整理され、見やすくなっています。

• 中央揃えのコンテンツ: ほとんどのコンテンツが中央揃えされており、読みやすさと視覚的なバランスを向上させています。

このテーマは、宇宙科学、天文学、または宇宙の不思議に興味のあるプレゼンテーションに最適です。漆黒の配色と星屑のような背景が、宇宙の奥深さや神秘性を伝えるのに役立ちます。

このテーマを利用する

CSS

/* @theme cosmic_exploration */
@import default;

section {
  display: flex;
  flex-direction: column;
  gap: 48px;
  font-size: 24pt;
  padding: 48px;
  background: #020024;
  color: #ffffff;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 24px 48px;
  background: #050438;
  color: #ffffff;
  box-shadow: 0 2px 4px #00000050;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 24px 48px;
  background: #050438;
  color: #ffffff;
  position: fixed;
  bottom: 0;
}

section.title {
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3CradialGradient id="grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"%3E%3Cstop offset="0" style="stop-color:rgba(0, 123, 255, 1)"/%3E%3Cstop offset="1" style="stop-color:rgba(117, 0, 255, 1)"/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect x="0" y="0" width="100" height="100" fill="url(%23grad)"/%3E%3C/svg%3E');
  background-size: cover;
  background-position: center;
  color: #ffffff;
  padding: 96px;
  text-align: center;
  font-size: 36pt;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

section.title h1 {
  font-size: 48pt;
  margin: 0;
}

section.info {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

section.info > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

section.info h2 {
  font-size: 30pt;
  margin: 0;
}

section.info p {
  font-size: 24pt;
}

.separator {
  width: 100%;
  height: 1px;
  background: #ffffff;
  margin: 32px 0;
}

.center {
  text-align: center;
}

Marpのサンプル

---
marp: true
theme: cosmic_exploration
header: " "
footer: " "
---

<!--
_class: title
-->

# Cosmic Exploration

---
# Our Mission
- To explore the vast unknown
- To discover new worlds
- To push the boundaries of human knowledge

---
<!--
_class: info
-->

## The Team
- **Commander:** Captain James T. Kirk
- **First Officer:** Mr. Spock
- **Chief Medical Officer:** Dr. Leonard McCoy

---
<!--
_class: info
-->

## The Ship
- **Name:** USS Enterprise
- **Class:** Constitution-class cruiser
- **Length:** 289 meters
- **Crew:** 430

---
<div class="separator"></div>

# The Destination
- **Target:** Alpha Centauri
- **Distance:** 4.37 light-years
- **Estimated Time of Arrival:** 5 years

---
<div class="separator"></div>

# The Challenges
- **Unknown dangers**
- **Limited resources**
- **The vastness of space**

---
<div class="separator"></div>

# The Rewards
- **Scientific discoveries**
- **New technologies**
- **Inspiration for future generations**

---
<footer class="center">boldly go where no one has gone before</footer>
---