手紙のようなMarpテーマ

このテーマの特徴

CSSテーマ「Serenity Slides」の特徴:

• 落ち着いた色調: スライドの背景は淡い水色（#e0f7fa）で、落ち着きのある雰囲気を演出します。
• 適切な余白: スライドのコンテンツには十分な余白（20px）が設けられており、読みやすく視覚的に魅力的なものになっています。

このテーマを利用する

CSS

/* @theme serenity_slides */
@import default;

section {
  background-color: #e0f7fa;
  max-width: 1280px;
  padding: 20px;
  margin: 0 auto;
  font-size: 24pt;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #3498db;
  color: white;
  font-size: 36pt;
  font-weight: bold;
}

footer {
  width: 100%;
  position: fixed;
  padding: 10px;
  background-color: #3498db;
  color: white;
  bottom: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

section.title {
  background-color: #f1f8e9;
  padding: 50px;
  text-align: center;
  font-size: 48pt;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  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='%23f1f8e9' d='M0 0L50 50L100 0L100 100L0 100L0 0Z'/%3E%3Cg filter='url(%23filter0_i)'%3E%3Cpath fill='%2334495e' d='M0 0L20 20L30 30L50 50L100 0L100 100L0 100L0 0Z'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_i' x='0' y='0' width='100%' height='100%' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0.282' result='BackgroundImageFix'/%3E%3CfeComposite in2='SourceAlpha' operator='in' result='see2'/%3E%3CfeGaussianBlur stdDeviation='1' result='see3'/%3E%3CfeComposite in='see2' in2='see3' operator='arithmetic' k2='-1' k3='1' result='see4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
}

Marpのサンプル

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

# タイトル

---
<!--
_class: default
-->

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