洗練されたプロフェッショナル向け: Finance Spectrum Marpテーマ

image0 image1

このテーマの特徴

特徴:

  • ブルー系のグラデーション: ヘッダーとフッターに、水色から青色へのグラデーションを使用しています。
  • 大きめのフォントサイズ: スライドの本文は24pt、見出しは36ptと、読みやすさを重視した大きなフォントサイズを使用しています。
  • セクションの背景色: セクションのタイトルは水色の背景で中央揃え表示されています。

メリット:

  • 視認性の向上: 大きなフォントサイズとコントラストのある配色により、スライドのコンテンツが読みやすくなっています。
  • 洗練されたデザイン: グラデーションと幾何学模様を使用することで、洗練されたプロフェッショナルな印象を与えます。

このテーマを利用する

CSS

/* @theme finance_spectrum */
@import default;

section{
  font-size: 24pt;
  padding: 20px;
}

header{
  background: linear-gradient(to right, #0067a5, #0087bd);
  padding: 10px 20px;
  color: white;
  font-size: 20pt;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

footer{
  width: 100%;
  position: fixed;
  padding: 10px;
  background: linear-gradient(to right, #0087bd, #0067a5);
  color: white;
  bottom: 0px;
  text-align: center;
}

section.title{
  background-color: #0067a5;
  color: white;
  padding: 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  font-size: 36pt;
  background-image: url("data:image/svg+xml,%3Csvg width='100%' height='100%' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='pattern' patternUnits='userSpaceOnUse' width='100' height='100'%3E%3Crect x='0' y='0' width='100%' height='100%' fill='%23e0deeb'/%3E%3Cpath d='M10 10 L 90 10 L 90 90 L 10 90 Z' fill='%23b8c2cc'/%3E%3Cpath d='M15 15 L 85 15 L 85 85 L 15 85 Z' fill='%23889ba6'/%3E%3Cpath d='M20 20 L 80 20 L 80 80 L 20 80 Z' fill='%2357678c'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%' height='100%' fill='url(%23pattern)'%3E%3C/rect%3E%3C/svg%3E");
}

Marpのサンプル

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

# 財務と金融のスライド

---
## セクション 1

### サブセクション 1
- リスト項目 1
- リスト項目 2

---
## セクション 2

### サブセクション 2
- リスト項目 1
- リスト項目 2

---
## セクション 3

### サブセクション 3
- リスト項目 1
- リスト項目 2