個性的

このテーマの特徴

この marp テーマの特徴は以下のとおりです。

• モダンでプロフェッショナルなデザイン: オレンジと黄色のグラデーションのヘッダー、濃い青のフッターが、プロフェッショナルで洗練された雰囲気を演出しています。

• コントラストの効いたカラーパレット: 色のコントラストが強く、テキストや画像が背景に対して際立つようになっています。濃いオレンジのタイトルセクションが注目を引きつけ、重要な情報を強調しています。

• タイポグラフィの工夫: サイズやフォントに変化を持たせたタイポグラフィを採用しています。タイトルセクションの大きなフォントがインパクトを与え、本文の読みやすさを確保しています。

• 背景グラデーション: ヘッダーとタイトルセクションにグラデーションを使用することで、視覚的な興味と奥行きが生まれています。

• 背景画像: タイトルセクションに背景画像を使用することで、テーマに個性と独創性を加えています。

• フレキシブルなレイアウト: セクションを垂直に並べたフレキシブルなレイアウトを採用しているため、さまざまなコンテンツニーズに対応できます。

このテーマは、プレゼンテーションを視覚的に魅力的で、理解しやすいものにするのに適しています。モダンな雰囲気と機能性のバランスがとれたデザインです。

このテーマを利用する

CSS

/* @theme custom_theme */
@import default;

section {
  display: flex;
  flex-direction: column;
  gap: 36pt;
  font-size: 24pt;
}

header {
  width: 100%;
  height: 80pt;
  background: linear-gradient(45deg, #f79256, #fbad1c); /* オレンジ、黄色グラデーション */
  color: #ffffff;
  padding: 24pt;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0px 8px 32px #00000029;
  font-size: 28pt;
}

footer {
  width: 100%;
  position: fixed;
  padding: 12pt;
  background: #3f51b5; /* 濃い青 */
  color: #ffffff;
  bottom: 0pt;
  display: flex;
  justify-content: center;
  gap: 10pt;
  box-shadow: 0px -8px 32px #00000029;
  font-size: 20pt;
}

section.title {
  background-color: #f79256; /* 濃いオレンジ */
  color: #ffffff;
  text-align: center;
  font-size: 48pt;
  padding: 50pt 0pt;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MTIiIGhlaWdodD0iMzQ2IiB2aWV3Qm94PSIwIDAgNTEyIDM0NiI+PHBhdGggZD0iTTE1NSAzNDJDMzguOTUgMzQyIDAgMjYzLjA1IDAgMTE3QzAgNDkuOTUgMzguOTUgMCAxNTUgMHMxNTUgNDkuOTUgMTU1IDExN1MyNzIgMzQyIDMzOC45NSA0OTkuOTVjNjkuNDUgNjkuNDUgMTY3LjA1IDY5LjQ1IDIzNi41IDBjYzY5LjQ1LTgwLjU1IDE2Ny4wNS04MC41NSAyMzYuNSAwQzQ1Mi45NSAyNjMgMzM4Ljk1IDE3Mi40NSAyNzIgMTE3QzIxNS4wNSAxNzEuNCAxNTUuMDkgMTcyLjU1IDk1IDE3Mi41QzkxLjA5IDE3Mi41IDg3LjI0IDE3MS4zIDg1IDE3MC4yN2MtMjIuOSAtMy40NS00MS4wNS0yNi40NS00MS4wNS01My4yNWMwLTM3LjA1IDE4LjEzLTcxLjA1IDQxLjA1LTk1LjA1YzIxLjkyLTI0IDQ4LjYtNDAuMDUgNzkuMDUtNDAuMDUjczU3LjE1IDE2LjA1IDc5LjA1IDQwLjA1YzIyLjkyIDI0IDQxLjA1IDU4IDQxLjA1IDk1LjA1YzAtMjYuODAtMTguMTMtNDkuODEtNDEuMDUtNTMuMjVjLTguOTUtMS4wOS0xNy45MS0xLjA5LTI1LjE5LTFDOzM4LjkyIDAgMCA0OS45NSAwIDExN3oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUgKVNjYWxlKDEuNSkiIGZpbGw9IiM0NTVBNjQiLz48L3N2Zz4=);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}

Marpのサンプル

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

<!--
_class: title
-->

# タイトル

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

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

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

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

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

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