このテーマの特徴
テーマの特徴:
全体的なスタイル:
- モダンで洗練された宇宙をテーマにしたデザイン
- ダークブルーとライトブルーのグラデーションとホワイトのテキストのコントラストが鮮やか
セクション:
- スライドの本文部分を表示するエリア
- ダークブルーとライトブルーのグラデーションの背景で、宇宙空間の雰囲気を演出しています
- セクション内のテキストは24ptの大きなフォントサイズで、可読性を高めています
タイトルスライド:
- スライドタイトルを強調した特別なセクション
- より濃いグラデーションの背景で、他のセクションと区別できます
- 背景には星のような模様が重ねられ、宇宙空間をより強く表現しています
- フォントサイズは36ptで、さらに目立たせています
このテーマを利用する
CSS
/* @theme cosmic_voyage */ @import default; section { display: flex; flex-direction: column; font-size: 24pt; padding: 20px; } header { width: 100%; background: linear-gradient(to right, #2193b0, #6dd5ed); color: #ffffff; font-size: 28pt; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2); text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); } footer { width: 100%; position: fixed; padding: 20px; background: linear-gradient(to right, #6dd5ed, #2193b0); color: #ffffff; bottom: 0px; display: flex; justify-content: center; align-items: center; gap: 20px; box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.2); text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); } section.title { background: linear-gradient(to right, #2b5876, #4e4376); color: #ffffff; padding: 40px; text-align: center; font-size: 36pt; background-image: url("data:image/svg+xml,%3Csvg width='100%' height='100%' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='pattern' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Crect width='100' height='100' fill='%23000000'/%3E%3Cpath d='M5 0h90v90H5z' fill='%234e4376' opacity='0.2'/%3E%3Cpath d='M25 0h50v100h-50z' fill='%232980b9' opacity='0.2'/%3E%3Cpath d='M50 0h50v100h-50z' fill='%232196f3' opacity='0.2'/%3E%3Cpath d='M75 0h25v100h-25z' fill='%236dd5ed' opacity='0.2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%' height='100%' fill='url(%23pattern)'%3E%3C/rect%3E%3C/svg%3E"); }
Marpのサンプル
--- marp: true theme: custom_theme header: " " footer: " " --- <!-- _class: title --> # チャートとグラフのデザインのイメージ --- ## 全体的な目標 - データを明確かつ簡潔に視覚化する - 視聴者に洞察を与え、決定を下すのを助ける --- ## 配色の指示 - 明るくメリハリのある色を使用する - 色の使用でデータのカテゴリーを差別化する - 背景はコントラストのある色または白で、データが目立つようにする --- ## グラフのタイプ - 柱状グラフ、折れ線グラフ、円グラフなど、さまざまなグラフの種類を使用する - 目的に最も適したタイプを選択する --- ## フォントの指示 - 明瞭で読みやすいフォントを使用する - 見出しに太字または大きなサイズを使用する - ラベルに中くらいのサイズを使用する - 視覚的に邪魔にならない、中立的な色を使用する --- ## レイアウトの指示 - 情報を階層的に整理する - グラフをページにバランスよく配置する - 十分な余白を使用して、雑然とした印象を避ける --- ## その他の考慮事項 - アニメーションやインタラクションを使用して、データの探索をより魅力的にする - 視聴者がデータの背景と意味を理解できるように、コンテキストを追加する - デザインがさまざまなデバイスで見栄えがするように最適化する