このテーマの特徴
CSSで新たに定義したカラーパレットの主な特徴と利点:
鮮明なコントスト: cssのカラーパレットは、コントストの鮮明さと可読性を確保する、強く鮮明な色調で提供されています。これによって、目には魅力的で、一貫性のある外観が得れます。
一貫性と再付用: カラーパレットは一貫した色調で設計されていて、再付用が容仕で、デザインの調和と視覚的魅力の持続を確保します。これにより、プロジェクト全体で一貫した外観が得れます。
バリエーションと適応性: カラーパレットには、バリエーションの幅広さを持った色調が揃っていて、適応性と用途の広さから、色調を選択し、プロジェクトのニーズに適するようにカスタマイズできるようになっています。
イメージや視覚的効果: カラーパレットは、視覚効果と印象を向上する、鮮やかな色とパсте色調の両方を効果に用います。これにより、魅力と注意の把持が図れます。
直感や感情の誘発: 暖色調、寒色調、中性色調など、カラーパレットの各色調には、感情やイメージが固まっていて、デザインの雰囲気やメッセージを強化します。
このテーマを利用する
CSS
/* @theme seasons */ @import default; section { display: flex; flex-direction: column; font-size: 24pt; position: relative; } header { width: 100%; height: 60px; background: linear-gradient(to right, #3366ff, #00cc99); color: white; padding: 10px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; } header h1 { font-size: 30pt; margin: 0; } footer { width: 100%; position: fixed; padding: 10px; background: linear-gradient(to right, #00cc99, #3366ff); color: white; bottom: 0px; text-align: center; } section.title { padding: 20px; text-align: center; background-color: rgba(255, 255, 255, 0.8); color: #3366ff; font-size: 36pt; display: flex; flex-direction: column; justify-content: center; margin: 20px; border: 1px solid #3366ff; } section.title:before { content: ""; position: absolute; top: -20px; left: -20px; width: calc(100% + 40px); height: calc(100% + 40px); background: #3366ff; z-index: -1; transform: rotate(45deg); } .season-spring { background-color: #00cc99; } .season-spring section.title { color: #006666; border-color: #006666; } .season-spring section.title:before { background: #006666; } .season-summer { background-color: #ff6600; } .season-summer section.title { color: #993300; border-color: #993300; } .season-summer section.title:before { background: #993300; } .season-autumn { background-color: #ff9900; } .season-autumn section.title { color: #663300; border-color: #663300; } .season-autumn section.title:before { background: #663300; } .season-winter { background-color: #0099cc; } .season-winter section.title { color: #003366; border-color: #003366; } .season-winter section.title:before { background: #003366; }
Marpのサンプル
--- marp: true theme: custom_theme header: " " footer: " " --- <!-- _class: title --> # タイトル --- <!-- _class: spring --> # 春 - 春のコンテンツ1 - 春のコンテンツ2 --- <!-- _class: spring --> # 夏 - 夏のコンテンツ1 - 夏のコンテンツ2 --- <!-- _class: autumn --> # 秋 - 秋のコンテンツ1 - 秋のコンテンツ2 --- <!-- _class: winter --> # 冬 - 冬のコンテンツ1 - 冬のコンテンツ2