このテーマの特徴
テーマの特徴
全画面表示されたヘッダーとフッター
- ヘッダーとフッターはそれぞれ画面の幅と高さ全体に表示され、画面上に固定されています。
水平方向に分割されたセクション
- 各セクションは水平方向の列として表示され、背景色が交互に切り替わります。
タイトルセクション
- タイトルセクションは、他のセクションとは異なる背景色 (#f8f9fa) を持ち、中央に配置されたより大きなフォントサイズ (36pt) でタイトルを表示します。
- タイトルセクションには、フッターもあり、相対的に配置されています。
大きいフォントサイズ (24pt)
- 本文のフォントサイズは全体を通して 24pt です。
優しい色合い
- ヘッダーとフッターには、青みがかったグレー (#8a8d8f) と白みがかったグレー (#f8f9fa) のグラデーションが使用されており、落ち着いた雰囲気を醸し出しています。
全体的な特徴
このテーマは、以下のような特徴があります。
- モダンでミニマリストなデザイン
- 優れた読みやすさ
- プレゼンテーション資料に最適な、明確な視覚階層
このテーマを利用する
CSS
/* @theme custom_theme */ @import default; section{ display: flex; flex-direction: column; font-size: 24pt; } header{ width: 100%; background: linear-gradient(to right, #f8f9fa, #8a8d8f); top: 0px; height: 40px } footer{ width: 100%; position: fixed; padding: 10px; background: linear-gradient(to right, #8a8d8f, #f8f9fa); bottom: 0px; } section.title{ background-color: #f8f9fa; color: #8a8d8f; padding: 30px; font-size: 36pt; gap: 20px; text-align: center; display: flex; flex-direction: column; justify-content: center; } section.title footer{ position: relative }
Marpのサンプル
--- marp: true theme: custom_theme header: " " footer: " " --- # タイトル --- # 見出し - これはリスト - これもリスト