このテーマの特徴
このテーマは、カラフルでモダンなデザインが特徴です。明るい色とグラデーションを使用しており、視覚的に魅力的なプレゼンテーションを作成するのに最適です。
特徴:
- ヘッダー: ヘッダーは、プレゼンテーションのタイトルとナビゲーションリンクを保持する領域です。ヘッダーは、濃い紫色のグラデーションで、白で太字でタイトルが表示されます。ナビゲーションリンクは、ヘッダーの右側に表示され、白で太字で表示されます。
- フッター: フッターは、プレゼンテーションの最終スライドに表示される領域です。フッターは、濃い青色のグラデーションで、白で太字で最終スライドのタイトルが表示されます。また、フッターには、次のスライド、前のスライド、ホームに戻るボタンがあります。
- セクション: セクションは、プレゼンテーションのスライドのグループです。各セクションは、異なる色で強調表示され、白で太字でセクションのタイトルが表示されます。
- タイトル: タイトルは、プレゼンテーションのタイトルが表示される領域です。タイトルは、濃い紫色のグラデーションで、白で太字でタイトルが表示されます。タイトルは中央に配置され、大きく表示されます。
このテーマを利用する
CSS
/* @theme custom_theme */ @import default; section{ display: flex; flex-direction: column; font-size: 24pt; padding: 20px; } header{ width: 100%; display: flex; justify-content: space-around; align-items: center; padding: 10px; background: linear-gradient(to right, #3498db, #8e44ad); color: white; font-size: 28pt; font-weight: bold; } footer{ width: 100%; position: fixed; padding: 10px; background: linear-gradient(to right, #8e44ad, #3498db); color: white; bottom: 0px; display: flex; justify-content: center; align-items: center; gap: 10px; } section.title{ background: linear-gradient(to right, #8e44ad, #3498db); color: white; padding: 50px; text-align: center; font-size: 48pt; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; }
Marpのサンプル
--- marp: true theme: custom_theme header: " " footer: " " --- <!-- _class: title --> # **教育用スライド** 学習を助ける落ち着いたデザイン --- <a href="https://github.com/marp-team/marp"><img src="http://marp.io/img/github.png" width="140" height="140" alt="GitHub" /></a> <a href="https://twitter.com/marp_team"><img src="http://marp.io/img/twitter.png" width="140" height="140" alt="Twitter" /></a> <a href="https://note.com/marp_noraniya"><img src="http://marp.io/img/note.png" width="140" height="140" alt="note" /></a> --- # 見出し - これは - それも --- # 小見出し - これはさらに - 小さい --- # リスト 1. 1つ目 2. 2つ目 3. 3つ目 --- # 箇条書き * 1つ目 * 2つ目 * 3つ目 --- # 画像 ![image](./image.png) --- # 表 | ヘッダー1 | ヘッダー2 | ヘッダー3 | |---|---|---| | セル1 | セル2 | セル3 | | セル4 | セル5 | セル6 | | セル7 | セル8 | セル9 | --- # コード