遊び心のあるプレゼンテーションを作成するための marp テーマ: Playful Presentation

image0 image1

このテーマの特徴

このテーマの特徴を以下にわかりやすく説明します。

全体的なスタイル:

  • 全体的に明るい色調で、オレンジとイエローのグラデーションが使用されており、遊び心のある印象を与えます。

セクション:

  • セクションは縦に並び、48pxの余白があります。
  • フォントサイズは24ptで、読みやすく快適な視認性です。
  • セクションの上下に余白があり、スライド内容を明確に分離しています。

タイトルセクション:

  • タイトルセクションは他のセクションとは異なります。
  • 黄色い背景で、テキストはオレンジ色で表示されます。
  • フォントサイズは36ptで、他のセクションよりも大きく、見出しを強調しています。
  • ライトバルブのアイコンがタイトルセクションの前に表示され、遊び心のある雰囲気を演出しています。

全体的な印象:

このテーマは、以下のような特徴を持つ、遊び心がありながら読みやすいプレゼンテーションを作成するために設計されています。

  • 明るく、目を引く配色
  • 明確に分離されたセクション
  • 強調されたタイトル
  • 固定されたフッターによる便利な参照

このテーマを利用する

CSS

/* @theme playful_presentation */
@import default;

section {
  display: flex;
  flex-direction: column;
  gap: 48px;
  font-size: 24pt;
  padding: 48px 32px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(to right, #fb8a3d, #fbbd08);
  color: #000000;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px;
  background: #fb8a3d;
  color: #000000;
  position: fixed;
  bottom: 0;
}

section.title {
  background-color: #fbbd08;
  color: #fb8a3d;
  padding: 64px;
  text-align: center;
  font-size: 36pt;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

section.title::before {
  content: "💡";
  font-size: 128pt;
  color: #fbbd08;
  background: #fb8a3d;
  padding: 16px;
  border-radius: 50%;
  margin: 0 auto 20px;
}

section.title h1 {
  font-size: 48pt;
  margin: 0;
}

Marpのサンプル

---
marp: true
theme: custom_theme
header: " "
footer: " "
---

<!--
_class: title
-->

# 財務プレゼンテーション

---

## 業績
- 収益は前四半期比15%増
- 純利益は前四半期比20%増
---

## 戦略
- 市場シェアの拡大に注力
- 新製品の開発
---

## テクノロジーソリューション
- クラウドベースのプラットフォームを採用
- データ分析を活用して顧客の洞察を得る