このテーマの特徴
テーマの特徴:
このカスタムテーマは、以下のような特徴を備えています。
- 勾配背景: ヘッダーとフッターに、鮮やかなグラデーションの背景を使用しています。
- 形状のクリッピングパス: ヘッダーとフッターは、波のような形のクリッピングパスで成形されています。
- 中央揃え: タイトルとコンテンツは、水平方向と垂直方向の両方に中央揃えにされています。
- コントラストの高い色: テーマでは、背景とテキストにコントラストの高い色を使用しており、テキストの読みやすさを向上させています。
- 大規模なフォントサイズ: テキストは、プレゼンテーションの視認性を高めるために、全体的に大規模なフォントサイズを使用しています。
- 波形の背景: タイトルセクションには、動きと興味を加える波形の背景イメージが使用されています。
このテーマを利用する
CSS
/* @theme custom_theme */ @import default; section { display: flex; flex-direction: column; gap: 36pt; font-size: 24pt; } header { width: 100%; height: 70pt; background: linear-gradient(to right, #500fd2, #6700be); color: #ffffff; padding: 18pt; display: flex; justify-content: space-between; align-items: center; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%); text-shadow: 0px 1px 2px #00000029; } footer { width: 100%; position: fixed; padding: 12pt; background: linear-gradient(to right, #d0021b, #f55a00); color: #ffffff; bottom: 0pt; display: flex; justify-content: center; gap: 10pt; clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 50% 0%); text-shadow: 0px -1px 2px #00000029; } section.title { background-color: #303030; color: #ffffff; padding: 30pt; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 48pt; background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 1600 800' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='wave' patternUnits='userSpaceOnUse' width='1600' height='800'%3E%3Cpath d='M0 0 L0 800 Q572 602 1200 537 Q1600 500 1600 500 L1600 0 L0 0 Z' fill='%23212121' %3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23wave)' %3E%3C/rect%3E%3C/svg%3E"); background-size: 100% 100%; }
Marpのサンプル
--- marp: true theme: custom_theme header: " " footer: " " --- <!-- _class: title --> # プレゼンテーションタイトル --- <style> .content { border: 1px solid black; padding: 1em; margin: 1em; } </style> ## セクション 1 <div class="content"> **問題の定義** </div> ### セクション 1.1 <div class="content"> **解決策** </div> ## セクション 2 <div class="content"> **プロジェクトチーム** </div> ### セクション 2.1 <div class="content"> **実施計画** </div> ---- ## セクション 3 <div class="content"> **測定基準** </div> ### セクション 3.1 <div class="content"> **質問と回答** </div>