シンプル 黄・オレンジ

image0 image1

このテーマの特徴

特徴:

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

  • グラデーションヘッダーとフッター: ヘッダーとフッターは、オレンジ色と黄色のグラデーションでデザインされています。

  • 固定フッター: フッターは画面の最下部に固定されており、スライドのナビゲーションに使用できます。

  • 強調されたタイトルセクション: タイトルセクションは黄色に強調されており、中央揃えされたタイトルとフッターを含みます。

  • カスタマイズ可能なタイトル: タイトルセクションの背景色、テキストカラー、フォントサイズをカスタマイズできます。

  • グラデーションフッター: フッターは、黄色のグラデーションを背景に、白いテキストでナビゲーションを提供します。

このテーマは、明るい色と動的な垂直スライドレイアウトを特徴としており、プレゼンテーションに視覚的なインパクトとスタイルを追加するのに適しています。

このテーマを利用する

CSS

/* @theme custom_theme */
@import default;

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

header {
  width: 100%;
  background: linear-gradient(to right, #f39c12, #fdbc62);
  top: 0px;
  height: 40px;
  display: flex;
  justify-content: center;
  gap: 10px;
  box-shadow: 0px 2px 4px #00000029;
}

footer {
  width: 100%;
  position: fixed;
  padding: 5px;
  background: linear-gradient(to right, #fdbc62, #f39c12);
  color: #ffffff;
  bottom: 0px;
  display: flex;
  justify-content: center;
  gap: 10px;
  box-shadow: 0px -2px 4px #00000029;
}

section.title {
  background-color: #ffee8b;
  color: #743c00;
  padding: 20px;
  text-align: center;
  font-size: 36pt;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

section.title footer {
  position: relative;
  margin-top: auto;
}

Marpのサンプル

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


# タイトル

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