鮮やかな色合いとコントラストを備えた魅力的なMarpテーマ

このテーマの特徴

この CSS で作成した Marp テーマの特徴は以下の通りです。

• 鮮やかな色合い: セクションの背景に、#ff416c から #ff4b2b への右方向へのグラデーションを使用しており、鮮やかで活気のある印象を与えます。

• ヘッダーとフッター: ヘッダーとフッターには、#483D8B と #E07A5F のアクセントカラーを使用しています。これらは、セクションのコンテンツとは異なるコントラストのある外観を作成します。ヘッダーとフッターは、ボックスシャドウで浮き彫りになっています。

• タイトルセクション: タイトルセクションは、#FFD166 の明るいオレンジ色を背景とし、#FFB62B の放射状グラデーションが重ねられています。中央揃えの大型フォント（48pt）を使用し、印象的なタイトルを作成します。

• タイポグラフィ: テーマ全体で「Helvetica」、「Arial」、または代替のサンセリフフォントを使用しています。フォントサイズは 24pt で、十分に読みやすいサイズです。

• コントラスト: テーマ内の明暗のコントラストが強調されており、テキストが背景とはっきり区別され、読みやすくなっています。

全体として、このテーマは鮮やかな色合い、コントラスト、明瞭なタイポグラフィを組み合わせて、講演を視覚的に魅力的で記憶に残るものにすることを目的としています。

このテーマを利用する

CSS

/* @theme vibrant_vibes */
@import default;

section {
  background: linear-gradient(to right, #ff416c, #ff4b2b);
  color: white;
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 24pt;
}

header {
  padding: 20pt 50pt;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #483D8B;
  color: white;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 20pt;
  background: #E07A5F;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.1);
}

section.title {
  background: #FFD166;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48pt;
  padding: 50pt 20pt;
  background-image: radial-gradient(circle at center, #FFD166 0%, #FFB62B 100%);
}

Marpのサンプル

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

# タイトル

---
<!--
_class: standard
-->

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