シンプル 緑

このテーマの特徴

カスタムテーマ「custom_theme」の特徴

このCSSは、以下の特徴を持つMarpのテーマを作成します。

• スライド全体が垂直にレイアウトされています: スライドは、上から下に垂直に積み重ねられています。
• 大きなフォントサイズ: 本文のフォントサイズは24ポイントで、見やすくなっています。
• ヘッダーとフッターが追加されています: 各スライドに、次のようなヘッダーとフッターが追加されています。
  • ヘッダー: スライドの上部にあり、緑色のグラデーションで背景が塗られています。
  • フッター: スライドの下部にあり、緑色のグラデーションで背景が塗られ、固定されています。ただし、「タイトル」スライドではフッターが相対的に配置されます。
• タイトルスライド: タイトルスライドは、暗緑色の背景、白いフォント、中央揃えのテキスト、上下20ピクセルの余白といった独自のスタイルを持っています。

このテーマを利用する

CSS

/* @theme custom_theme */
@import default;

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

header{
  width: 100%;
  background: linear-gradient(to right, #00796b, #e6e6e6);
  top: 0px;
  height: 20px
}

footer{
  width: 100%;
  position: fixed;
  padding: 10px;
  background: linear-gradient(to right, #e6e6e6, #00796b);
  bottom: 0px; 
}

section.title footer{
  position: relative
}

section.title{
  background-color: #00796b;
  color: #e6e6e6;
  padding: 10px;
  font-size: 30pt;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

Marpのサンプル

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


# タイトル

---


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