シンプル 紫

image0 image1

このテーマの特徴

カスタムテーマの特徴:

全体的なレイアウト:

  • セクションは縦方向に配置されています。
  • 文字サイズは全体で 24pt です。

ヘッダー:

  • 背景色は紫色から青色のグラデーションになっています。
  • テキストは白色です。
  • フォントサイズは 24pt で太字になっています。
  • 幅いっぱいまで広がっており、要素は左右に均等に配置されています。

フッター:

  • 背景色は青色から紫色のグラデーションになっています。
  • テキストは白色です。
  • 画面の下部に固定されており、幅いっぱいまで広がっています。
  • 要素は中央揃えで、水平方向に 10px の間隔があります。

タイトルセクション:

  • 背景色はピンク色です。
  • テキストは白色です。
  • フォントサイズは 36pt で、中央揃えされています。
  • セクション内の要素は縦方向に均等に配置されており、上下に 20px の間隔があります。

このテーマを利用する

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: linear-gradient(to right, #8e2de2, #4a00e0);
  color: #ffffff;
  font-size: 24pt;
  font-weight: bold;
}

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

section.title{
  background-color: #e082fe;
  color: #ffffff;
  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: " "
---


# タイトル

---


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