このテーマの特徴

aurora_borealis テーマの特徴:

オーロラのような色使い: ヘッダーとフッターは、オーロラを彷彿とさせる青と紫のグラデーションを採用しています。
視認性の高いヘッダーとフッター: ヘッダーとフッターはコントラストの高い色で強調されており、ページの重要な情報を目立たせます。
斜めのタイトルセクション: タイトルセクションは、斜めに傾いており、視覚的な興味と動感を生み出します。
鮮やかな背景のタイトルセクション: タイトルセクションには、オーロラのような背景画像が使用されており、視覚効果を高めます。
見出しのサイズとフォント: 見出しは大きく太字で、重要な情報を際立たせます。
見出し下の段落: 見出しの下には、より小さなフォントサイズの段落があり、詳細情報を提供します。
テーマカラーを強調するボタン: ボタンは、テーマカラーの青色を使用しており、強調したいアクションを目立たせます。
動的なフォントの選択: ヘッダーとタイトルには太字のフォントが、本文には標準的なフォントが使用されており、コントラストが生まれています。
全体的にモダンで洗練された外観: このテーマは、モダンで洗練された雰囲気を醸し出していて、プレゼンテーションや資料作成に適しています。

このテーマを利用する

CSS

/* @theme aurora_borealis */
@import default;

section {
  display: flex;
  flex-direction: column;
  font-size: 24pt;
}

header {
  width: 100%;
  background: linear-gradient(to right, #00c6ff, #0072ff);
  color: white;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  font-size: 30pt;
  font-weight: bold;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
}

footer {
  width: 100%;
  position: fixed;
  padding: 12pt;
  background: linear-gradient(to right, #0072ff, #00c6ff);
  color: white;
  bottom: 0pt;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10pt;
  box-shadow: 0px -8px 16px rgba(0, 0, 0, 0.1);
}

section.title {
  background-color: #00c6ff;
  color: white;
  text-align: center;
  font-size: 48pt;
  padding: 100px 0px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJzdmcyIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCI+PHJlY3QgaWQ9InJlY3QyIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIGZpbGw9IiMwMEM2RkYiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtmaWxsLXJ1bGUtb2Zmc2V0OjAuNSIvPjxwYXRoIGlkPSJwYXRoNCIgZD0iTTIxIDMzLjMzMzhDbDIuMTIwMyAyNS42Njc0IDAuMDAwOSAxNy42OTQ1IDAuMDAwOSAxNy42OTQ1YzAuMDAwOSAwIDAuMDAwOSAwIDAuMDAwOSAwdi0yLjU2MDJjMC4wMDA5IDAgMC4wMDA5IDAgMC4wMDA5IDBjMC4wMDA5IDAgMC4wMDA5IDAgMC4wMDA5IDBjMC4wMDA5IDAgMC4wMDA5IDAgMC4wMDA5IDBjMC44ODE4LTAuMTA5NSAxLjc0MzQtMC4yMTg4IDIuNTkyOS0wLjMxODZjMC44NTA1LTAuMTA5OSAxLjcwMTEtMC4yMTg4IDIuNDgyNS0wLjMxODZjMC43ODE0LTAuMTA5OSAxLjU2MjUtMC4yMTg4IDIuMzEyNi0wLjMxODZjMC43NTAxLTAuMTA5OSA0LjIxODgtMC4yMTg4IDQuMjE4OC0wLjIxODh2MjYuNjc1YzAuMDAwOSAwIDAuMDAwOSAwIDAuMDAwOSAwYzAuMDAwOSAwIDAuMDAwOSAwIDAuMDAwOSAwdi0yLjU2MDJjMC4wMDA5IDAgMC4wMDA5IDAgMC4wMDA5IDBjMC4wMDA5IDAgMC4wMDA5IDAgMC4wMDA5IDBWNzAuOTI2Mkw0MCA5Ny4zMzM4IDIwIDg0LjMzMzhjLTMuNjQ5OS0yLjkzMzQtNy4xNjg4LTQuOTMzNC0xMC42Njg4LTYuOTMzNGMtMy41MDAtMi02LjcxODctMy45MzMzLTkuNTk3Ny01LjkzMzNjLTMuNjk4OS0yLjkzMzQtNy41OTc3LTUuOTMzNC0xMS40OTY2LTguOTMzNGMtMy44OTg5LTIuOTMzNC03Ljk5NzgtNS45MzMzLTEyLjE5NTYtOC45MzMzYy00LjE5NzktMi45MzMzLTguMzk1OC01LjkzMzQtMTIuNTk0LThjLTQuMTk3OS0yLjA2NjYtOC4zOTU4LTQuMTY2Ni0xMi41OTQtNi4yNjY2Yy00LjE5NzktMi4xLTE0LjM5NTEtNC4xNjY2LTE0LjM5NTEtNC4xNjY2SDAuMDAwOSAyMS4wMDAzIDAuMDAwOSAzMy4zMzM4IDIxIDMzLjMzMzh6IiBmaWxsPSIjM0E1QUZGIiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlPSIjMDEzQTVGIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=");
  background-size: cover;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  transform: skewY(-3deg);
}

section.title h1 {
  font-size: 56pt;
}

section.title p {
  font-size: 36pt;
}

.button {
  background-color: #0072ff;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16pt;
  font-weight: bold;
  text-decoration: none;
}

.button:hover {
  background-color: #00c6ff;
  color: white;
}

.code-example {
  background-color: #f5f5f5;
  padding: 16px;
  margin: 24px 0;
  font-family: monospace;
  font-size: 14pt;
  line-height: 24px;
  overflow: auto;
}

Marpのサンプル

---
marp: true
theme: custom_theme
header: " "
footer: " "
---
<!--
_class: title
-->

# 大学講義用スライドテンプレート

---
## 見出し

ここでは、

- リスト 1
- リスト 2

について説明します。

---
## コード例