このテーマの特徴
特徴:
- ダークブルーの背景: スライドに落ち着いた雰囲気をもたらします。
- 明るいフォントカラー: 文字を背景から際立たせます。
- セクションの広い余白: テキストの読みやすさを向上させます。
- ヘッダーとフッターの半透明化: 背景を透かして、スライドのコンテンツをさりげなく表示します。
- タイトルセクションの強調: 背景色とフォントサイズの変更で、タイトルを強調します。
- タイトルセクションの円形境界線: 視覚的な興味を加え、タイトルを強調します。
- タイトルセクションの中央揃え: タイトルをスライドの中心に配置し、バランスのとれた外観を作成します。
- 固定されたフォントサイズ: すべてのセクションで一貫したフォントサイズを使用し、読みやすさを向上させます。
- 明瞭なフォント: sans-serif フォントを使用し、明確かつモダンな外観を提供します。
このテーマを利用する
CSS
/* @theme custom_theme */ @import default; section { background: #3f51b5; color: #f5f5f5; padding: 42px; font-size: 24pt; line-height: 1.5; } header { display: flex; justify-content: space-between; align-items: center; background: #3f51b5; color: #f5f5f5; padding: 10px 20px; position: fixed; top: 0; left: 0; width: 100%; } footer { display: flex; justify-content: center; align-items: center; background: #3f51b5; color: #f5f5f5; padding: 10px; position: fixed; bottom: 0; left: 0; width: 100%; } section.title { background: #f5f5f5; color: #3f51b5; padding: 48px; text-align: center; font-size: 36pt; display: flex; flex-direction: column; justify-content: center; margin: 20px; } section.title::before { content: ""; display: block; width: 100px; height: 100px; border: 6px solid #3f51b5; border-radius: 50%; margin: 0 auto 20px; } section.title h1 { font-size: 48pt; margin: 0; }
Marpのサンプル
--- marp: true theme: custom_theme header: " " footer: " " --- <!-- _class: title --> # ソフトウェアトレーニング --- ## 見出し ### サブ見出し - これはリスト - これもリスト --- ## 見出し - これはリスト - これもリスト --- ## 見出し - これはリスト - これもリスト --- ## 見出し - これはリスト - これもリスト --- ## 見出し - これはリスト - これもリスト