スクエア

このテーマの特徴

特徴:

• モダンなデザイン: 背景の薄い灰色とシャープなフォントで、洗練された印象を与えます。

• セクションの識別が容易: 各セクションは背景色(#f5f5f5)で区別されており、ナビゲートを簡単に行えます。

• 強調された見出し: "title" クラスを持つセクションは、より大きなフォント(#000000)と中央揃えで、重要なトピックを際立たせます。

• 影と丸みを帯びた境界: ヘッダーとフッターには影が追加され、セクションにはわずかに丸みを帯びた境界線が施されています。

このテーマを利用する

CSS

/* @theme my_presentation_theme */
@import default;

section {
  font-size: 24pt;
  color: #4c4b4b;
  line-height: 1.4;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: #00b4db;
  color: white;
  box-shadow: 0 2px 4px #0000001a;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: #ffffff;
  box-shadow: 0 -2px 4px #0000001a;
}

section.title {
  background: #dbe2ef;
  color: #000000;
  text-align: center;
  font-size: 36pt;
  padding: 40px;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23dbe2ef' d='M48 37L6 10L48 6L90 10L48 37Z'/%3E%3Cpath fill='%23c6dbef' d='M48 64L6 31L48 17L90 31L48 64Z'/%3E%3Cpath fill='%23c2c2c2' d='M48 91L6 58L48 43L90 58L48 91Z'/%3E%3Cpath fill='%23b3b3b3' d='M-3 -2L35 20L35 101L-3 101L-3 -2Z'/%3E%3C/svg%3E");
}

Marpのサンプル

---
marp: true
theme: my_presentation_theme
---

<!--
_class: title
-->

# タイトル スライド

---

<!--
_class: section-content
-->

# 見出し スライド
- これはリスト
- これもリスト