メタリック

このテーマの特徴

この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
-->

## ありがとうございました

ご清聴ありがとうございました。ご質問があれば、お気軽にお申し付けください。