グラデーション ピンク

このテーマの特徴

テーマの特徴

• 垂直方向にスライド: スライドは縦に表示されます。

• スライドサイズ: スライドはブラウザの高さ全体を使用します。

• ヘッダーとフッター: 各スライドには、グラデーション背景と影効果のある固定ヘッダーとフッターがあります。

  • ヘッダーはスライドの上部にあり、スライド番号とタイトルを表示します。
  • フッターはスライドの下部にあり、ナビゲーションボタンを表示します。

• タイトルスライド: タイトルスライドは、ピンクの背景、白いテキスト、中央揃えが特徴です。フォントサイズはより大きくなっています。

• スライド背景: スライドの背景は白です。

• タイトルフォント: タイトルフォントは24ptです。

• グラデーション: ヘッダーとフッターは、ピンク(#ffb3a7)とクリーム(#fffacd)のグラデーション背景を使用しています。

• 影効果: ヘッダーとフッターには、スライドに奥行きを与える影効果があります。

このテーマを利用する

CSS

/* @theme custom_theme */
@import default;

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

header {
  width: 100%;
  height: 50pt;
  background: linear-gradient(to right, #ffb3a7, #fffacd);
  color: #000000;
  padding: 10pt;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0px 8px 32px #00000029;
}

footer {
  width: 100%;
  position: fixed;
  padding: 10pt;
  background: linear-gradient(to right, #fffacd, #ffb3a7);
  color: #000000;
  bottom: 0pt;
  display: flex;
  justify-content: center;
  gap: 10pt;
  box-shadow: 0px -8px 32px #00000029;
}

section.title {
  background-color: #ffb3a7;
  color: #ffffff;
  text-align: center;
  font-size: 48pt;
  padding-top: 50pt;
  padding-bottom: 50pt;
  display: flex;
  justify-content: center;
  align-items: center;
}

Marpのサンプル

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

# パステルカラーのグラデーション

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

## 見出し

- これはリスト
- これもリスト

---
## 見出し

- これはリスト
- これもリスト

---
## 見出し

- これはリスト
- これもリスト