斜め長方形

このテーマの特徴

CSSで新たに定義したカラーパレットの主な特徴と利点：

• 鮮明なコントスト： cssのカラーパレットは、コントストの鮮明さと可読性を確保する、強く鮮明な色調で提供されています。これによって、目には魅力的で、一貫性のある外観が得れます。

• 一貫性と再付用： カラーパレットは一貫した色調で設計されていて、再付用が容仕で、デザインの調和と視覚的魅力の持続を確保します。これにより、プロジェクト全体で一貫した外観が得れます。

• バリエーションと適応性： カラーパレットには、バリエーションの幅広さを持った色調が揃っていて、適応性と用途の広さから、色調を選択し、プロジェクトのニーズに適するようにカスタマイズできるようになっています。

• イメージや視覚的効果: カラーパレットは、視覚効果と印象を向上する、鮮やかな色とパсте色調の両方を効果に用います。これにより、魅力と注意の把持が図れます。

• 直感や感情の誘発： 暖色調、寒色調、中性色調など、カラーパレットの各色調には、感情やイメージが固まっていて、デザインの雰囲気やメッセージを強化します。

このテーマを利用する

CSS

/* @theme seasons */
@import default;

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

header {
  width: 100%;
  height: 60px;
  background: linear-gradient(to right, #3366ff, #00cc99);
  color: white;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header h1 {
  font-size: 30pt;
  margin: 0;
}

footer {
  width: 100%;
  position: fixed;
  padding: 10px;
  background: linear-gradient(to right, #00cc99, #3366ff);
  color: white;
  bottom: 0px;
  text-align: center;
}

section.title {
  padding: 20px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.8);
  color: #3366ff;
  font-size: 36pt;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 20px;
  border: 1px solid #3366ff;
}

section.title:before {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  background: #3366ff;
  z-index: -1;
  transform: rotate(45deg);
}

.season-spring {
  background-color: #00cc99;
}

.season-spring section.title {
  color: #006666;
  border-color: #006666;
}

.season-spring section.title:before {
  background: #006666;
}

.season-summer {
  background-color: #ff6600;
}

.season-summer section.title {
  color: #993300;
  border-color: #993300;
}

.season-summer section.title:before {
  background: #993300;
}

.season-autumn {
  background-color: #ff9900;
}

.season-autumn section.title {
  color: #663300;
  border-color: #663300;
}

.season-autumn section.title:before {
  background: #663300;
}

.season-winter {
  background-color: #0099cc;
}

.season-winter section.title {
  color: #003366;
  border-color: #003366;
}

.season-winter section.title:before {
  background: #003366;
}

Marpのサンプル

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

# タイトル

---

<!--
_class: spring
-->

# 春
- 春のコンテンツ1
- 春のコンテンツ2

---

<!--
_class: spring
-->

# 夏
- 夏のコンテンツ1
- 夏のコンテンツ2

---

<!--
_class: autumn
-->

# 秋
- 秋のコンテンツ1
- 秋のコンテンツ2

---

<!--
_class: winter
-->

# 冬
- 冬のコンテンツ1
- 冬のコンテンツ2