このテーマの特徴
カスタムテーマの特徴:
目立つタイトルセクション:タイトルセクションは黒の背景に白のテキストで、ページの中央に大きく表示されます。
洗練されたタイポグラフィ:フォントサイズは全体に大きく、24pt で設定されています。タイトルセクションでは 48pt のフォントサイズを使用し、インパクトを与えます。
カスタムグラデーション:ヘッダー、タイトルセクションのフッター、フッターにカスタムグラデーションを使用し、テーマに視覚的な興味を加えています。
簡潔なデザイン:余白とパディングが適切に使用されており、読みやすく視覚的に appealing なデザインになっています。
このテーマを利用する
CSS
/* @theme custom_theme */ @import default; section{ display: flex; flex-direction: column; font-size: 24pt; } header{ width: 100%; background: linear-gradient(to right, #007991, #78ffd6); color: #ffffff; top: 0; height: 50px; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; box-sizing: border-box; } footer{ width: 100%; position: fixed; padding: 10px 20px; background: #ef476f; color: #ffffff; bottom: 0; display: flex; justify-content: center; align-items: center; gap: 10px; } section.title{ background-color: #111; color: #ffffff; padding: 50px 30px; font-size: 48pt; text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 20px; } section.title footer{ position: relative; background: linear-gradient(to right, #43CEA2, #185A9D); color: #ffffff; margin-top: auto; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; width: 100%; }
Marpのサンプル
--- marp: true theme: custom_theme header: " " footer: " " --- <!-- _class: title --> # スライドの名前 --- # 見出し - これはリスト - これもリスト