このテーマの特徴
marpテーマ「inspiring_minds」
主な特長:
- グラデーションヘッダーとフッター:鮮やかなグラデーションが目を引くヘッダーとフッター。
- 背景画像:ヘッダーに、流線的な背景画像を使用。
- センタリング:セクションのタイトルをセンタリングして、見やすさを向上。
- フォントサイズとフォント色:見やすさを重視した、24ptのフォントサイズと、白黒のフォント色を使用。
- 整列:セクションは垂直に整列し、柔軟性と構造化を実現。
- 余白:ヘッダー、フッター、タイトルセクションに十分な余白を設け、視覚的なバランスと読みやすさを向上。
- レスポンシブ:さまざまなデバイスに適応するよう、レスポンシブに作成。
スタイル:
- 近代的でスタイリッシュ。
- プロフェッショナルで洗練された。
- 視覚的なインパクトが大きく、聴衆の注意を引く。
このテーマを利用する
CSS
/* @theme inspiring_minds */ @import default; section{ display: flex; flex-direction: column; font-size: 24pt; } header{ width: 100%; background: linear-gradient(to right, #e082fe, #4a00e0); padding: 10px; color: #ffffff; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iY2FyZCIgd2lkdGg9IjMxMCIgaGVpZ2h0PSIzMTAiIGZpbGw9InVybCgjZ3JhZC1kZWZsKSIgLz48Z3JhZGllbnQgaWQ9ImdyYWQtZGVmbCIgY3g9IjE1NSIgc3A9IjAiIHg9IjAiIHk9IjAiIHkxPSIzMTAiIHhsaW5rcz0iMC41IDAuNSA0OTkuNSAwLiU7NDkuNSA0OTkuNSA0OTkuNSI+PHN0b3Agc3RvcC1jb2xvcj0iIzRhMDA4NyIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzhhMDA3MyIgb2Zmc2V0PSIxIi8+PC9ncmFkaWVudD48L2RlZnM+PHVzZSB4bGluazpocmVmPSIjY2FyZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTc1IC04NCkiIC8+PC9zdmc+); background-size: contain; background-position: center top; background-repeat: no-repeat; } footer{ width: 100%; position: fixed; padding: 10px; background: linear-gradient(to right, #4a00e0, #e082fe); color: #ffffff; bottom: 0px; } section.title{ background-color: #ffffff; color: #4a00e0; padding: 50px; text-align: center; font-size: 36pt; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; }
Marpのサンプル
--- marp: true theme: inspiring_minds header: " " footer: " " --- <!-- _class: title --> # inspiring_minds --- <!-- _class: standard --> # 見出し - これはリスト - これもリスト