赤い窓

image0 image1

このテーマの特徴

エレガント エデュケーションのテーマの特徴:

  • ダークで洗練された配色: ネイビー (#34495e) とバーガンディ (#e63946) の組み合わせにより、高級感と教育機関の雰囲気を醸し出しています。
  • 明確な構造: セクションは縦に並べられ、明確な区別がされています。
  • 大きなフォントサイズ: 36ptの見出しは、遠くからも鮮明に読むことができます。
  • ヘッダーとフッター: 両方のヘッダーとフッターは、固定されており、ナビゲーションや重要な情報を常に表示しています。
  • カスタマイズされたタイトルセクション: バーガンディ色の背景、大きなフォントサイズ (48pt)、センターアライメントを特徴とするタイトルセクションは、プレゼンテーションに印象的な見出しを提供します。
  • 背景パターンの使用: タイトルセクションの背景には、バーガンディに重ねられた幾何学的なパターンが使用されており、テクスチャと深みを加えています。
  • 影エフェクト: ヘッダーとフッターには、立体感を加える影エフェクトがあります。
  • 全体的な印象: このテーマは、専門的で洗練された教育機関向けのプレゼンテーションに最適です。そのダークな配色と明確な構造により、内容を際立たせ、聴衆の注意を引きます。

このテーマを利用する

CSS

/* @theme elegant_education */
@import default;

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

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #34495e;
  color: white;
  font-size: 24pt;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

footer {
  position: fixed;
  width: 100%;
  padding: 20px;
  background-color: #34495e;
  color: white;
  bottom: 0px;
  text-align: center;
  font-size: 24pt;
  box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.2);
}

section.title {
  background-color: #e63946;
  color: white;
  padding: 40px;
  text-align: center;
  font-size: 48pt;
  background-image: url("data:image/svg+xml,%3Csvg width='100%' height='100%' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='pattern' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Crect width='100' height='100' fill='%23e63946'/%3E%3Cpath d='M5 0h90v90H5z' fill='%23f48fb1' opacity='0.2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%' height='100%' fill='url(%23pattern)'%3E%3C/rect%3E%3C/svg%3E");
}

Marpのサンプル

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

# 授業計画 スライド テンプレート

---
<!--
_class: learning_objectives
-->

## 学習目標

- この授業で達成したいことを明確に示す
- 簡潔かつ理解しやすい形で記載する

---
<!--
_class: lesson_activities
-->

## 授業活動

- 授業の各活動を明確に示す
- 必要に応じて詳細な説明を含める

---
<!--
_class: assessment
-->

## 評価

- 生徒の進捗状況をどのように評価するかを示す
- 評価方法を明確に説明する

---
<!--
_class: reflection
-->

## 振り返り

- この授業についての感想や改善点を記載する
- 生徒の進捗状況や授業の成果についての考察を記載する