このテーマの特徴
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 について説明します。 --- ## コード例