Marpで高速にスライド作成 〜編集可能なパワポ出力〜

---
marp: true
theme: default
header: "Marpによる高速スライド作成"
---

# Marpスライド
## ~Marpによる高速スライド作成~

2025年5月9日

---

## Marpスライド

### 1. Marpインストール
- Vs codeまたはCursorで、拡張機能でMarpをインストール
- test.mdを作成して、Marpで可視化

### 2. Marpでスライド出力
- 三角形が２つ重なったアイコンをクリック
- パワポやPDF形式で出力

---
marp: true
theme: default
header: "Marpによる高速スライド作成"
style: |
  section {
    font-size: 28px;
    background-repeat: no-repeat /* 共通 */;
  }

  /* 表紙以外のページの背景 */
  section:not(.cover) {
    background-image: url("slide_template.svg"); /* <- メイン背景のURL */
    background-position: top left; /* <- メイン背景の基準位置 */
    background-size: 1280px; /* <- メイン背景のサイズ */
  }

  /* 表紙ページの背景 */
  section.cover {
    background-image: url("cover_template.svg"); /* ★ 表紙用の背景画像URLを指定 */
    background-position: center center; /* 例: 中央揃え */
    background-size: cover; /* 例: 全体を覆うように調整 */
    /* 表紙ページ特有の他のスタイルがあればここに追加 */
    /* 例: テキストの色を白にするなど */
    /* color: white; */
  }

  h1 {
    font-size: 42px;
  }
  h2 {
    font-size: 36px;
  }
  img {
    max-height: 450px;
    display: block;
    margin: 0 auto;
  }
  a {
    color: #0066cc;
  }

---
<!-- _class: cover -->

# Marpスライド
## ~Marpによる高速スライド作成~

2025年5月9日

---

## Marpスライド

### 1. Marpインストール
- Vs codeまたはCursorで、拡張機能でMarpをインストール
- test.mdを作成して、Marpで可視化

### 2. Marpでスライド出力
- 三角形が２つ重なったアイコンをクリック
- パワポやPDF形式で出力

Marp形式でスライドを作成することを支援するAIです。
下記のMarp形式を参考にして、Marpドキュメントを出力してください。

# 注意点
* styleの内容は変えないでください。slide_template.pngやfront_template.pngは存在します。
* 画像を配置するときは、![bg contain right:40%]のようにcontainを明記してください。

# Marpのサンプル

---
marp: true
theme: default
header: "Marpによる高速スライド作成"
style: |
  section {
    font-size: 28px;
    background-repeat: no-repeat /* 共通 */;
  }

  /* 表紙以外のページの背景 */
  section:not(.cover) {
    background-image: url("slide_template.svg"); /* <- メイン背景のURL */
    background-position: top left; /* <- メイン背景の基準位置 */
    background-size: 1280px; /* <- メイン背景のサイズ */
  }

  /* 表紙ページの背景 */
  section.cover {
    background-image: url("cover_template.svg"); /* ★ 表紙用の背景画像URLを指定 */
    background-position: center center; /* 例: 中央揃え */
    background-size: cover; /* 例: 全体を覆うように調整 */
    /* 表紙ページ特有の他のスタイルがあればここに追加 */
    /* 例: テキストの色を白にするなど */
    /* color: white; */
  }

  h1 {
    font-size: 42px;
  }
  h2 {
    font-size: 36px;
  }
  img {
    max-height: 450px;
    display: block;
    margin: 0 auto;
  }
  a {
    color: #0066cc;
  }

---
<!-- _class: cover -->

# Marpスライド
## ~Marpによる高速スライド作成~

2025年5月9日

---

## Marpスライド

### 1. Marpインストール
- Vs codeまたはCursorで、拡張機能でMarpをインストール
- test.mdを作成して、Marpで可視化

### 2. Marpでスライド出力
- 三角形が２つ重なったアイコンをクリック
- パワポやPDF形式で出力
![bg contain right:40%](marp_intro.png)

https://r.jina.ai/マークダウン化したいサイトのURL

例
https://r.jina.ai/https://note.com/masa_kazama/n/na10f1ec82d57