このテーマの特徴

特徴:

テクニカルで洗練された美学: #111 の濃い背景色、#00b4d8 と #00f5d4 のサイバーなグラデーション、シンプルなフォントが、テクノロジーがテーマのプレゼンテーションに適しています。
コンテンツの階層化: 見出しとボディテキストのサイズの違い、セクション間の大きなギャップにより、コンテンツが明確に区別され、読みやすさが向上します。
ヘッダーのハイライト: ヘッダーは明るいグラデーションで背景が際立ち、プレゼンテーションのタイトルやナビゲーションが目立ちます。
対照的な色: #eee のライトカラーテキストと #111 のダークカラーの背景により、テキストが強調され、視認性が向上します。
技術アイコン: 「tech-icon」クラスは、テクノロジーに関連したアイコンを強調し、視覚的な関心を引き出します。

このテーマを利用する

CSS

/* @theme tech_edge */
@import default;

section{
  display: flex;
  flex-direction: column;
  gap: 64px;
  font-size: 24pt;
  padding: 48px;
  background-color: #111;
  color: #eee;
}

header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: linear-gradient(to right, #00b4d8, #00f5d4);
  color: white;
  font-size: 28pt;
  position: relative;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #00f5d4;
  font-weight: bold;
}

.logo img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.nav-links {
  display: flex;
  gap: 20px;
  font-size: 18pt;
}

.nav-links a {
  color: white;
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}

.nav-links a:hover {
  color: #00f5d4;
}

header::after {
  content: "";
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 100%;
  height: 10px;
  background: linear-gradient(to right, #00f5d4, #00b4d8);
}

footer{
  position: fixed;
  padding: 10px;
  background: linear-gradient(to right, #00f5d4, #00b4d8);
  color: white;
  bottom: 0px;
  width: 100%;
  text-align: center;
}

section.title{
  background-color: #222;
  color: white;
  padding: 50px;
  font-size: 36pt;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  position: relative;
}

section.title::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  background: #00b4d8;
  z-index: -1;
  transform: rotate(45deg);
}

.tech-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background: #00f5d4;
  color: #111;
  font-size: 48pt;
  border-radius: 50%;
  margin: 0 auto 20px;
}

Marpのサンプル

---
marp: true
theme: custom_theme
header: " "
footer: " "
---
<!--
_class: title
-->

# テクノロジーの未来

---
<!--
_class: standard
-->

## テクノロジーの進歩

- テクノロジーは急速に進歩しています
- これは私たちの生活に多くの変化をもたらしました
- 私たちはテクノロジーの未来に備える必要があります

---

## テクノロジーの課題

- テクノロジーには課題もあります
- 私たちはこれらの課題に対処する必要があります
- テクノロジーが私たちを害さないようにする必要があります