グラデーション 紫・青

このテーマの特徴

このテーマは、カラフルでモダンなデザインが特徴です。明るい色とグラデーションを使用しており、視覚的に魅力的なプレゼンテーションを作成するのに最適です。

特徴:

• ヘッダー: ヘッダーは、プレゼンテーションのタイトルとナビゲーションリンクを保持する領域です。ヘッダーは、濃い紫色のグラデーションで、白で太字でタイトルが表示されます。ナビゲーションリンクは、ヘッダーの右側に表示され、白で太字で表示されます。
• フッター: フッターは、プレゼンテーションの最終スライドに表示される領域です。フッターは、濃い青色のグラデーションで、白で太字で最終スライドのタイトルが表示されます。また、フッターには、次のスライド、前のスライド、ホームに戻るボタンがあります。
• セクション: セクションは、プレゼンテーションのスライドのグループです。各セクションは、異なる色で強調表示され、白で太字でセクションのタイトルが表示されます。
• タイトル: タイトルは、プレゼンテーションのタイトルが表示される領域です。タイトルは、濃い紫色のグラデーションで、白で太字でタイトルが表示されます。タイトルは中央に配置され、大きく表示されます。

このテーマを利用する

CSS

/* @theme custom_theme */
@import default;

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

header{
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px;
  background: linear-gradient(to right, #3498db, #8e44ad);
  color: white;
  font-size: 28pt;
  font-weight: bold;
}

footer{
  width: 100%;
  position: fixed;
  padding: 10px;
  background: linear-gradient(to right, #8e44ad, #3498db);
  color: white;
  bottom: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

section.title{
  background: linear-gradient(to right, #8e44ad, #3498db);
  color: white;
  padding: 50px;
  text-align: center;
  font-size: 48pt;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

Marpのサンプル

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

# **教育用スライド**

学習を助ける落ち着いたデザイン

---
<a href="https://github.com/marp-team/marp"><img src="http://marp.io/img/github.png" width="140" height="140" alt="GitHub" /></a>
<a href="https://twitter.com/marp_team"><img src="http://marp.io/img/twitter.png" width="140" height="140" alt="Twitter" /></a>
<a href="https://note.com/marp_noraniya"><img src="http://marp.io/img/note.png" width="140" height="140" alt="note" /></a>

---
# 見出し

- これは
- それも

---
# 小見出し

- これはさらに
- 小さい

---
# リスト

1. 1つ目
2. 2つ目
3. 3つ目

---
# 箇条書き

* 1つ目
* 2つ目
* 3つ目

---
# 画像

![image](./image.png)

---
# 表

| ヘッダー1 | ヘッダー2 | ヘッダー3 |
|---|---|---|
| セル1 | セル2 | セル3 |
| セル4 | セル5 | セル6 |
| セル7 | セル8 | セル9 |

---
# コード