幾何学模様

このテーマの特徴

このCSSはMarp用の「financial_theme」というテーマを作成しています。

特徴:

• 全体的に青を基調とした配色: ヘッダー、フッター、タイトルセクションで青のグラデーションを使用しています。
• 読みやすいフォント: 本文のフォントサイズを18ポイントに設定し、行間を1.4に設定しています。
• 目立つヘッダーとフッター: ヘッダーとフッターを固定にし、青いグラデーションで目立つようにしています。ヘッダーにはページタイトル、フッターにはページ番号が表示されます。
• 視覚的に印象的なタイトルセクション: タイトルセクションを濃い青色で塗りつぶし、白いテキストを使用しています。また、三角形の背景パターンを使用し、テキストを中央揃えで配置しています。

このテーマを利用する

CSS

/* @theme financial_theme */
@import default;

section{
  font-size: 18pt;
  line-height: 1.4;
  background: #f2f2f2;
}

header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: linear-gradient(to right, #00479e, #2c9eda);
  color: white;
}

footer{
  width: 100%;
  position: fixed;
  padding: 10px;
  background: linear-gradient(to right, #2c9eda, #00479e);
  color: white;
  bottom: 0px;
  text-align: center;
}

section.title{
  background-color: #00479e;
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 36pt;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2300479e' d='M-3 -2L35 20L35 101L-3 101L-3 -2Z'/%3E%3Cg transform='translate(44 37)'%3E%3Cpath fill='%232c9eda' d='M5 16L21 16L17 6L5 16Z'/%3E%3Cpath fill='%232382be' d='M5 23L21 23L21 6L5 23Z'/%3E%3Cpath fill='%231a6cb3' d='M5 30L21 30L21 6L5 30Z'/%3E%3Cpath fill='%231355a7' d='M5 37L21 37L21 6L5 37Z'/%3E%3Cpath fill='%230c419c' d='M5 44L21 44L21 6L5 44Z'/%3E%3Cpath fill='%23052d90' d='M5 51L21 51L21 6L5 51Z'/%3E%3Cpath fill='%23001a85' d='M5 58L21 58L21 6L5 58Z'/%3E%3Cpath fill='%23390066' d='M5 65L21 65L21 20L5 65Z'/%3E%3Cpath fill='%233e006b' d='M5 72L21 72L21 20L5 72Z'/%3E%3Cpath fill='%23430070' d='M5 79L21 79L21 20L5 79Z'/%3E%3Cpath fill='%23480075' d='M5 86L21 86L21 20L5 86Z'/%3E%3Cpath fill='%234d0079' d='M5 93L21 93L21 20L5 93Z'/%3E%3Cpath fill='%2352007e' d='M-3 -2L21 37L21 -2L-3 -2Z'/%3E%3C/g%3E%3Cpath fill='%23c0392b' d='M22 16L6 52L23 98L31 52L22 16Z'/%3E%3C/svg%3E");
}

Marpのサンプル

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

# Financial Presentation

---
# Revenue
- Increased by 15% YoY
- Driven by strong demand for our products
---
# Expenses
- Decreased by 5% YoY
- Due to cost-cutting measures
---
# Profit
- Increased by 20% YoY
- As a result of increased revenue and decreased expenses