このテーマの特徴
スポーツとトレーニングをテーマにしたmarpテーマ
このテーマは、スポーツやトレーニングに関連するプレゼンテーションに適した、以下のような特徴があります。
- スポーツを彷彿させるカラーリング:背景はオフホワイト、ヘッダーとフッターは赤とオレンジのグラデーションになっています。
- 大胆なタイポグラフィ:見出しと本文のフォントは大きくて太字で、強調されています。
- タイトルセクション:タイトルセクションは赤の背景で、中央揃えで表示されます。見出しは非常に大きく、本文はより小さく、中央に配置されています。
スポーツとトレーニングのテーマに関連する追加機能:
- 色の組み合わせは、スポーツやトレーニングで一般的な赤、オレンジ、白を使用しています。
このテーマを利用する
CSS
/* @theme sports_and_training */ @import default; section{ background-color: #f5f5f5; padding: 20px; font-size: 18pt; color: #333; } header{ width: 100%; background: linear-gradient(to right, #f5af19, #f12711); color: white; height: 80px; display: flex; justify-content: center; align-items: center; gap: 20px; font-size: 24pt; font-weight: bold; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); } footer{ width: 100%; position: fixed; padding: 20px; background: linear-gradient(to right, #f12711, #f5af19); color: white; bottom: 0px; text-align: center; font-size: 14pt; font-weight: bold; } section.title{ background-color: #f5af19; color: white; padding: 60px 40px; text-align: center; font-size: 36pt; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 40px; } section.title h1{ font-size: 48pt; font-weight: bold; } section.title p{ font-size: 24pt; font-weight: normal; } .button{ background-color: #f12711; color: white; padding: 10px 20px; border-radius: 5px; font-size: 16pt; font-weight: bold; text-decoration: none; } .button:hover{ background-color: #f5af19; color: white; }
Marpのサンプル
--- marp: true theme: sports_and_training header: " " footer: " " --- <!-- _class: title --> # スライドのタイトル ## サブタイトル --- <!-- _class: section --> # 見出し - これはリスト - これもリスト --- <!-- _class: section --> ## サブ見出し - これはリスト - これもリスト --- <!-- _class: section --> ### サブ・サブ見出し - これはリスト - これもリスト ---