このテーマの特徴
CSSテーマ「Serenity Slides」の特徴:
- 落ち着いた色調: スライドの背景は淡い水色(#e0f7fa)で、落ち着きのある雰囲気を演出します。
- 適切な余白: スライドのコンテンツには十分な余白(20px)が設けられており、読みやすく視覚的に魅力的なものになっています。
このテーマを利用する
CSS
/* @theme serenity_slides */ @import default; section { background-color: #e0f7fa; max-width: 1280px; padding: 20px; margin: 0 auto; font-size: 24pt; } header { display: flex; justify-content: space-between; align-items: center; padding: 10px; background-color: #3498db; color: white; font-size: 36pt; font-weight: bold; } footer { width: 100%; position: fixed; padding: 10px; background-color: #3498db; color: white; bottom: 0px; display: flex; justify-content: center; align-items: center; gap: 10px; } section.title { background-color: #f1f8e9; padding: 50px; text-align: center; font-size: 48pt; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f1f8e9' d='M0 0L50 50L100 0L100 100L0 100L0 0Z'/%3E%3Cg filter='url(%23filter0_i)'%3E%3Cpath fill='%2334495e' d='M0 0L20 20L30 30L50 50L100 0L100 100L0 100L0 0Z'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_i' x='0' y='0' width='100%' height='100%' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0.282' result='BackgroundImageFix'/%3E%3CfeComposite in2='SourceAlpha' operator='in' result='see2'/%3E%3CfeGaussianBlur stdDeviation='1' result='see3'/%3E%3CfeComposite in='see2' in2='see3' operator='arithmetic' k2='-1' k3='1' result='see4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E"); }
Marpのサンプル
--- marp: true theme: custom_theme header: " " footer: " " --- <!-- _class: title --> # タイトル --- <!-- _class: default --> # 見出し - これはリスト - これもリスト