このテーマの特徴
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 | --- ## コード