シンプル　水色

スライド

image0 image1

このテーマの特徴

このCSSスタイルは、以下のような特徴を持つMarpテーマを指定しています。

レイアウト

  • セクションは縦方向に並びます。
  • フォントサイズは 24pt です。

ヘッダー

  • ヘッダーは水平方向に並び、justifyContent は "space-between" です。
  • ヘッダーには、背景に右から左へのリニアグラデーション #00b4db から #3a4750 があり、色は白です。

フッター

  • フッターは画面下部に固定され、幅は 100% です。
  • ヘッダーと同様に、リニアグラデーション #3a4750 から #00b4db の背景と白のテキストがあります。

タイトルセクション

  • タイトルセクションは、20px のパディング、中央揃えのテキスト、#00b4db の背景色、白のテキスト、36pt のフォントサイズで表示されます。
  • 垂直方向に並び、justifyContent は "center" です。
  • ギャップは 20px です。

このテーマは、グラデーションヘッダーとフッター、中央揃えのテキスト、見出しスタイルのタイトルセクションを備えた、モダンで洗練されたプレゼンテーション用の視覚的に魅力的なテーマです。

このテーマを利用する

CSS

/* @theme my_custom_theme */
@import default;

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

header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: linear-gradient(to right, #00b4db, #3a4750);
  color: white;
}

footer{
  width: 100%;
  position: fixed;
  padding: 10px;
  background: linear-gradient(to right, #3a4750, #00b4db);
  color: white;
  bottom: 0px;
  text-align: center;
}

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

Marpのサンプル

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


# タイトル

---



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