シンプル　緑

スライド

image0 image1

このテーマの特徴

カスタムテーマの特徴:

1. 固定ヘッダーとフッター:

  • ヘッダーとフッターは画面の上下端に固定されており、スクロールしても表示され続けます。

2. 緑色のヘッダー:

  • ヘッダーは緑色 (#00796b) で、白字でブランド名やメニューが表示されます。

3. シンプルなナビゲーション:

  • ヘッダーのナビゲーションは、リンクが水平方向に並んだシンプルなものです。

4. アンダーライン付きのタイトル:

  • セクションタイトルは中央揃えで、緑色で下線が引かれています。

5. 大きなフォントサイズ:

  • テキストのフォントサイズは全体として大きめに設定されており、読みやすさを向上させています。

6. グレイのフッター:

  • フッターはグレイ (#e6e6e6)で、黒字で補助的な情報が表示されます。

このテーマを利用する

CSS

/* @theme custom_theme */
@import default;

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

header {
  --header-height: 80px;
  width: 100%;
  background-color: #00796b;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
  font-weight: bold;
}
header nav a {
  margin-left: 20px;
  text-decoration: none;
  color: #fff;
}

footer {
  width: 100%;
  background-color: #e6e6e6;
  color: #000;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

section.title {
  background-color: #00796b;
  color: #fff;
  padding: 20px;
  margin-top: var(--header-height);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 48pt;
}

Marpのサンプル

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

# タイトル

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

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