このテーマの特徴
このCSSで作成されたmarpテーマの特徴は次のとおりです。
- セクションごとの垂直レイアウト: セクションは垂直に配置され、セクション間には20pxの隙間があります。
- ヘッダーとフッター: ヘッダーはスライドの上部にあり、背景色は淡いグレーで、タイトルと日付を表示します。フッターはスライドの下部に固定され、ページ番号とナビゲーションボタンを表示します。
- メインタイトルスライド: タイトルスライドは濃い青色の背景色を持ち、大きなテキストでスライドのタイトルを表示します。中央に配置され、垂直方向に均等に配置されています。また、微妙な斜線パターンの背景画像があります。
- 視覚的なスタイル: テーマ全体に、青、グレー、白のカラーパレットが使用されており、視覚的に調和のとれた洗練された外観になっています。
このテーマを利用する
CSS
/* @theme letter_presentation */ @import default; section{ display: flex; flex-direction: column; gap: 20px; padding: 20px; } header{ display: flex; align-items: center; justify-content: space-between; background-color: #e6e6e6; padding: 10px; color: #4a6986; font-size: 24pt; } footer{ width: 100%; position: fixed; padding: 10px; background: linear-gradient(to right, #4a6986, #e6e6e6); color: #ffffff; bottom: 0px; left: 0; z-index: 999; display: flex; justify-content: center; align-items: center; gap: 20px; } section.title{ background-color: #4a6986; color: #ffffff; padding: 30px; font-size: 36pt; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; background-image: repeating-linear-gradient( 45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0) 40% ); }
Marpのサンプル
--- marp: true theme: letter_presentation header: "Letter Design Specification" footer: "© 2023 Your Company" --- <!-- _class: title --> # レターデザイン仕様 --- <!-- _class: specification --> ## 仕様 - フォント:Helvetica - フォントサイズ:12pt - 余白:1インチ - 行間:1.5倍 --- <!-- _class: examples --> ## 例 ここでは、さまざまなレターテンプレートの例を示します。 --- <!-- _class: thanks --> ## ありがとうございました ご清聴ありがとうございました。ご質問があれば、お気軽にお申し付けください。