このテーマの特徴
このCSSで作成したmarpテーマの特徴は次のとおりです。
ヘッダーとフッターにグラデーション背景: ヘッダーとフッターは、左から右に色合いが変化するグラデーションになっています。ヘッダーは #f7797d から #fbd786、フッターは #fbd786 から #f7797d に変化しています。
セクションは垂直方向に並べられている: 各セクションは縦に並んで表示されます。
デフォルトのフォントサイズは24pt: セクション内のテキストは、デフォルトで24ptのフォントサイズで表示されます。
タイトルセクションは中央揃えで強調表示: "title"クラスが付けられたセクションは、中央揃えで背景色が #f7797d の濃いピンク色で、文字色が白で強調されています。
タイトルセクションのフッター: "title"クラスが付けられたセクションのフッター部分は、相対的に配置され、背景色が #fbd786 の淡いピンク色です。
このテーマを利用する
CSS
/* @theme construction_proposal */ @import default; section{ display: flex; flex-direction: column; font-size: 24pt; } header{ display: flex; justify-content: space-between; align-items: center; padding: 10px; background: linear-gradient(to right, #f7797d, #fbd786); color: white; } footer{ width: 100%; position: fixed; padding: 10px; background: linear-gradient(to right, #fbd786, #f7797d); color: white; bottom: 0px; text-align: center; } section.title{ background-color: #f7797d; color: white; padding: 20px; text-align: center; font-size: 36pt; display: flex; flex-direction: column; justify-content: center; gap: 20px; } section.title footer{ position: relative; background: #fbd786; margin-top: auto; }
Marpのサンプル
--- marp: true theme: construction_proposal header: "建設提案" footer: "信頼性の高い建設パートナーとの連携" --- <!-- _class: title --> ## **建設提案** **信頼性の高い建設パートナーとの連携** --- ## スライド 1: 紹介 **_プロジェクトの概要_** **_プロジェクトのビジョンと目標_** --- ## スライド 2: プロジェクトの詳細 **_プロジェクトの範囲__** **_タイムライン__** **_コスト__** --- ## スライド 3: 建設の利点 **_地域社会への影響_** **_環境への影響_** --- ## スライド 4: 設計案 **_設計コンセプト_** **_インスピレーション_** --- ## スライド 5: 持続可能性 **_持続可能な取り組み_** **_関連する認定や基準_** --- ## スライド 6: 建設パートナー **_建設会社_** **_建築家_** --- ## スライド 7: 財務情報 **_資金調達方法_** **_投資収益率(ROI)_** --- ## スライド 8: 次の手順 **_提案書提出_** **_連絡先情報_**