グラデーション 緑・青

image0 image1

このテーマの特徴

特徴:

この CSS テーマは、技術的なレポートに適したプロフェッショナルで洗練された外観を提供しています。

  • 固定ヘッダーとフッター: アクセシビリティと一貫性のために、すべてのページに固定ヘッダーとフッターがあります。ヘッダーはマゼンタとグリーンのグラデーションで強調されており、タイトルを表示します。フッターはグリーンとマゼンタのグラデーションで、ページ番号を表示します。
  • 背景のグラデーション: スライド全体で、マゼンタとグリーンのグラデーションが背景に使用されており、ダイナミックで視覚的に魅力的な効果を生み出しています。
  • 大きな見出し: スライドの見出しは 48 ポイントの大きく太字で表示され、タイトルを目立たせます。
  • セクションの区切り: 各セクションは、異なる背景色とパディングを持つ明確な区切りによって区別されています。
  • 中央揃え: 見出しとテキストは、明確さと視覚的整合性のために中央揃えになっています。
  • フォントのサイズとスタイル: 全体的なフォントサイズは 32 ポイントで、読みやすさと可視性を確保しています。ヘッダーとフッターのフォントサイズは 20 ポイントと 14 ポイントに縮小され、視覚的な階層を形成しています。

このテーマを利用する

CSS

/* @theme professional_technicial_report */
@import default;

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

header{
  width: 100%;
  background: linear-gradient(to right, #1976d2, #388e3c);
  color: white;
  top: 0px;
  height: 50px;
  padding: 5px;
  font-size: 20pt;
  box-shadow: 0 2px 5px #888888;
}

footer{
  width: 100%;
  background: linear-gradient(to right, #388e3c, #1976d2);
  color: white;
  position: fixed;
  padding: 15px;
  margin-top: 30px;
  bottom: 0px;
  font-size: 14pt;
  text-align: center;
  box-shadow: 0 -2px 5px #888888;
}

section.title{
  background-color: #f5f5f5;
  color: #1976d2;
  padding: 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  font-size: 48pt;
  margin-bottom: 30px;
}

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

Marpのサンプル

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


# タイトル

---

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

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