このテーマの特徴
特徴:
- グラデーション背景: セクションとタイトルのスライドに、緑がかったベージュから白へのグラデーションの背景が使用されています。
- 緑色のアクセント: ヘッダー、フッター、セクションタイトルなどのデザイン要素に、鮮やかな緑色(#319177)が使用されています。
- 見出し: 見出しは大きく、太字で表示され、コントラストの高い緑色が使用されています。
- セクションタイトル: タイトルスライドには、大きく中央揃えのテキストと緑色の背景を使用し、印象的な視覚効果を生み出しています。
- コンテンツセクション: コンテンツセクションは、ベージュの背景と緑色の見出しを使用して、読みやすさと構造化を実現しています。
- 項目リスト: 項目リストは、丸みを帯びた緑色の背景を使用して、重要な情報を強調しています。
- ボックスシャドウ: フッターには、微妙なボックスシャドウが追加され、スライド設計に奥行きが加わっています。
全体として、このテーマはシンプルで読みやすく、緑色のアクセントとグラデーションの背景により、新鮮で魅力的なビジュアルプレゼンテーションを提供します。
このテーマを利用する
CSS
/* @theme custom_theme */ @import default; section { display: flex; flex-direction: column; font-size: 24pt; padding: 20px; background: linear-gradient(to bottom, #f5f5dc 0%, #fdfdfd 50%, #f5f5dc 100%); } header { display: flex; justify-content: space-between; align-items: center; height: 60px; background: #319177; color: white; font-size: 18pt; font-weight: bold; padding: 0 20px; } footer { width: 100%; position: fixed; padding: 10px; background: #319177; color: white; bottom: 0px; text-align: center; font-size: 14pt; display: flex; justify-content: center; align-items: center; gap: 10px; box-shadow: 0 -2px 5px #888888; } section.title { padding: 100px 0; text-align: center; background: #f5f5dc; color: #319177; font-size: 36pt; font-weight: bold; display: flex; justify-content: center; align-items: center; gap: 20px; background-image: linear-gradient(to bottom, #f5f5dc 0%, #fdfdfd 50%, #f5f5dc 100%); } section.title h1 { font-size: 48pt; } section.title p { font-size: 24pt; } section.content { background: #fdfdfd; color: #319177; padding-top: 60px; } section.content h2 { font-size: 30pt; font-weight: bold; margin-bottom: 10px; } section.content ul { list-style-type: none; padding: 0; display: flex; flex-wrap: wrap; gap: 20px; } section.content li { background: #f5f5dc; color: #319177; padding: 10px; border-radius: 5px; font-size: 18pt; width: 200px; } section.content p { font-size: 18pt; margin-bottom: 20px; }
Marpのサンプル
--- marp: true theme: custom_theme header: " " footer: " " --- <!-- _class: title --> # 営業用スライド --- <!-- _class: content --> ## プレゼンテーションの目的 このプレゼンテーションの目的は、以下を説明することです。 - 製品やサービス - 会社の価値提案 - 呼び出し(行動喚起) --- <!-- _class: content --> ## 会社紹介 私たちは、問題に対する革新的なソリューションを提供する、業界をリードする企業です。 --- <!-- _class: content --> ## 製品・サービス 当社のコア製品/サービスは次のとおりです。 - [製品/サービスの名前] - [製品/サービスの名前] - [製品/サービスの名前] --- <!-- _class: content --> ## 価値提案 当社の製品/サービスが他社と異なる理由は次のとおりです。 - [価値提案のポイント] - [価値提案のポイント] - [価値提案のポイント] --- <!-- _class: content --> ## 実績 当社はすでに、以下の実績を上げています。 - [実績の例] - [実績の例] - [実績の例] --- <!-- _class: content --> ## 呼び出し(行動喚起) ぜひ、当社にお問い合わせいただき、貴社のビジネスの課題をどのように解決できるかについて話し合いましょう。 連絡先: - メールアドレス - 電話番号 - ウェブサイトの URL 当社を選択していただき、ありがとうございます。