ライン オレンジ・緑

このテーマの特徴

カスタムテーマの特徴:

• 垂直レイアウト: スライドは垂直に並べられます。

• ヘッダー:

  • オレンジ色の背景で、スライドのタイトルとページ番号を表示します。
  • 幅はスライド全体に及び、上部に配置されています。

• フッター:

  • グリーンの背景で、スライドの合計数を表示します。
  • ページ下部に固定され、中央揃えされています。

• タイトルセクション:

  • ベージュの背景で、スライドのタイトルとサブタイトルを表示します。
  • セクションの中央に配置され、上下に余白があります。
  • フォントサイズは他のセクションより大きく、太字になっています。

このテーマを利用する

CSS

/* @theme custom_theme */
@import default;

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

header{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: #e67e22;
  color: #ffffff;
  font-size: 24pt;
  font-weight: bold;
}

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

section.title{
  background-color: #f4f1de;
  color: #000000;
  padding: 50px;
  text-align: center;
  font-size: 36pt;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

Marpのサンプル

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

<!--
_class: title
-->

# CSSでデザインされたスライド

---
## セクション1

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

---
## セクション2

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