技術 - 近未来的で革新的なプレゼンテーションテーマ

image0 image1

このテーマの特徴

techno_style テーマの特徴:

  • ダークでハイテクな雰囲気: 背景を黒 (#191919) にし、テキストを白 (#ffffff) にすることで、スタイリッシュで現代的な印象を与えます。
  • グラデーションヘッダーとフッター: ヘッダーとフッターにオレンジとイエローのグラデーションを使用し、目を引き、テーマに動きをつけます。
  • 大きなフォントと太字: 見出し (h1、h2、h3) とリストアイテムは大きなフォントサイズと太字を使用しており、重要な情報を強調します。

このテーマを利用する

CSS

/* @theme techno_style */
@import default;

section{
  font-family: 'Helvetica Neue', sans-serif;
  background-color: #191919;
  color: #ffffff;
}

header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: linear-gradient(to right, #0B263F, #FFD900);
  color: white;
  text-align: center;
  font-size: 28pt;
  font-weight: bold;
}

footer{
  width: 100%;
  position: fixed;
  bottom: 0px;
  left: 0;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to right, #FFD900, #FB6400);
  color: #ffffff;
}

section.title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 50px;
  background: linear-gradient(to right, #0B263F, #FB6400);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  color: #ffffff;
  font-size: 48pt;
  font-weight: bold;
  gap: 20px;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

h1{
  font-size: 36pt;
  font-weight: bold;
}

h2{
  font-size: 28pt;
  font-weight: bold;
}

h3{
  font-size: 24pt;
  font-weight: bold;
}

ul{
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

li{
  font-size: 20pt;
}

a{
  color: #0B263F;
  text-decoration: none;
}

a:hover{
  text-decoration: underline;
}

.icon{
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

Marpのサンプル

---
marp: true
theme: custom_theme
header: " "
footer: " "
---

<!--
_class: title
-->

# 技術 - 近未来的で革新的なテーマ

---
## 概要

- 近未来的で革新的なデザイン
- 技術的な概念を視覚的に表現
- クリーンで整理されたレイアウト

---
## カラーパレット

- **プライマリ:** ロイヤルブルー (#0B263F)
- **セカンダリ:** イエロー (#FFD900)
- **アクセント:** オレンジ (#FB6400)

---
## タイポグラフィ

- フォント: Helvetica Neue または類似のサンセリフフォント
- サイズ: 見出し 36pt、本文 24pt
- 太字: 見出しと重要な情報
- イタリック: 強調したい情報

---
## 画像とアイコン

- 技術的な概念を表すアイコンを使用
- 明るくインパクトのある画像を使用

---
## レイアウト

- クリーンで整理されたデザイン
- 豊富な余白で読みやすく
- 見出しを視覚的に目立たせる
- 図表を使用して情報を視覚的に伝える

---
## その他のデザイン要素

- テクスチャやパターンで視覚的な興味を追加
- グラデーションで奥行きと次元感を表現
- ドロップシャドウやハイライトで要素に深みを与える

---
# 例

このスライドでは、テーマの機能の一部を示します。

---
## 見出しと箇条書き

### 見出し 3
- 箇条書き 1
- 箇条書き 2

---
## 画像

[画像の代替テキスト]

---
## 図形

[図形の代替テキスト]

---
## 表

| 列 1 | 列 2 | 列 3 |
|---|---|---|
| 値 1 | 値 2 | 値 3 |
| 値 4 | 値 5 | 値 6 |

---
## コード