グラデーション 青・紫

image0 image1

このテーマの特徴

このカスタムテーマの特徴:

  • セクションの縦方向レイアウト: セクションは縦方向に配置されます。
  • 大きなフォントサイズ: 全体的にフォントサイズは大きめ(30pt)に設定されています。
  • ヘッダー:
    • ヘッダーは画面上部にあり、幅100%です。
    • グラデーションの背景色で、白字で表示されます。
    • フォントサイズが18ptで、高さは40pxです。
    • ドロップシャドウ効果で強調されています。
  • フッター:
    • 画面下部に固定され、幅100%です。
    • グラデーションの背景色で、白字で表示されます。
    • フォントサイズが12ptで、テキストは中央揃えです。
  • タイトルセクション:
    • 薄いグレーの背景色で、黒字で表示されます。
    • パディングが大きく、フォントサイズが42ptです。
    • 中央揃えで、上下にギャップがあります。
    • 下部に線境界があります。

このテーマを利用する

CSS

/* @theme custom_theme */
@import default;

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

header {
  width: 100%;
  background: linear-gradient(to right, #7c5bbd, #2b2164);
  color: white;
  top: 0px;
  height: 40px;
  padding: 5px;
  font-size: 18pt;
  box-shadow: 0 5px 5px #888888;
}

footer {
  width: 100%;
  position: fixed;
  padding: 10px;
  background: linear-gradient(to right, #2b2164, #7c5bbd);
  color: white;
  bottom: 0px;
  font-size: 12pt;
  text-align: center;
}

section.title {
  background-color: #f5f5f5;
  color: #000000;
  padding: 40px;
  margin-bottom: 20px;
  font-size: 42pt;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  border-bottom: 1px solid #808080;
}

section.title footer {
  position: relative;
  margin-top: auto;
}

Marpのサンプル

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

# 戦略テンプレート

---
<!--
_class: section
-->

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