Cosmos: スタイリッシュで実用的なプレゼンテーションのためのダークテーマ

image0 image1

このテーマの特徴

特徴:

このテーマは「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
-->

## 結論

- 技術は私たちの生活を大きく変えました。
- 技術には力と可能性がありますが、課題もあります。
- 技術の力を賢く利用し、その課題に対処することが重要です。