このテーマの特徴
特徴:
このテーマは「Cosmosテーマ」というタイトルで、以下のような特徴があります。
- ダークな背景: スライドは暗い青 (#03071e) の背景を使用し、白いテキストで表示されます。
- ヘッダーとフッターの固定: ヘッダーとフッターは画面の上下端に固定されており、スクロールしても常に表示されます。
- セクションタイトルの円形デザイン: セクションタイトルのスライドは、中央に白い円形があり、その円形内にタイトルが表示されます。
- ヘッダーとフッターのアクセントカラー: ヘッダーとフッターは青 (#023e8a) のアクセントカラーが使用されており、背景から際立っています。
- 円形のアイコン: セクションタイトルのスライドの円形は、アイコンとして機能し、スライドのトピックを表します。
- 大きなフォントサイズ: スライドの本文は24pt、タイトルは48ptと、見やすい大きなフォントサイズで表示されます。
このテーマを利用する
CSS
/* @theme cosmos_theme */ @import default; section { background: #03071e; color: #ffffff; padding: 40px; font-size: 24pt; line-height: 1.5; } header { display: flex; justify-content: space-between; align-items: center; background: #023e8a; color: #ffffff; padding: 10px 20px; position: fixed; top: 0; left: 0; width: 100%; z-index: 10; } footer { display: flex; justify-content: center; align-items: center; background: #023e8a; color: #ffffff; padding: 10px; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 10; } section.title { background: radial-gradient(circle at center, #03071e 0%, #023e8a 100%); color: #ffffff; padding: 54px; text-align: center; font-size: 36pt; display: flex; flex-direction: column; justify-content: center; margin: 20px; } section.title::before { content: ""; display: block; width: 140px; height: 140px; border: 6px solid #ffffff; border-radius: 50%; margin: 0 auto 20px; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHBhdGggZD0ibTM2IDh2NTZjMjQgMCA0NCAyMCA0NCA0NHY0NGwwLTQ0em0yMi43Mi0xLjI4bDM0LjY0LTM0LjY0LTMyLjcyIDMyLjcyem0tMzIuNzItMzIuNzJsMzMuMzYtMzMuMzZ2MzMuMzZ6bTk5LjY4IDM5LjM2bC0zMy4zNi0zMy4zNi0zNC42NCAzNC42NHMzMy4zNiAzMy4zNiAzNC42NCAzNC42NHoiIHN0eWxlPSJmaWxsOiNmZmZmZmYiLz48L3N2Zz4='); } section.title h1 { font-size: 48pt; margin: 0; }
Marpのサンプル
--- marp: true theme: cosmos_theme header: " " footer: " " --- <!-- _class: title --> # テクノロジー --- <!-- _class: section --> ## テクノロジーの力 - 技術は私たちの生活に革命を起こしました。 - それは私たちが世界とつながり、学び、仕事をする方法を変えました。 - 技術はこれからも進化し続け、私たちの人生にさらに大きな影響を与えるでしょう。 --- <!-- _class: section --> ## テクノロジーの可能性 - 技術は無限の可能性を秘めています。 - それは世界中の問題を解決するために使用できます。 - 技術を賢く使うことで、より良い未来を築くことができます。 --- <!-- _class: section --> ## テクノロジーの課題 - 技術には課題も伴います。 - それは依存症、プライバシーの侵害、雇用の喪失につながる可能性があります。 - 技術の課題を認識し、それらを軽減するための措置を講じることが重要です。 --- <!-- _class: section --> ## 結論 - 技術は私たちの生活を大きく変えました。 - 技術には力と可能性がありますが、課題もあります。 - 技術の力を賢く利用し、その課題に対処することが重要です。