Obsidianのプラグイン「Marp Slides」でマークダウンからササっとプレゼン資料をつくってみた

---
marp: true
theme: default
paginate: true
size: 16:9
style: |
  /* シンプルな全体スタイル */
  section { font-family: "Helvetica Neue", Arial, sans-serif; color:#222; padding:28px; }
  h1 { font-size:40px; margin:0 0 8px 0; }
  .subtitle { color:#666; margin:0 0 18px 0; }
  .center { display:flex; justify-content:center; align-items:center; }
  .rounded { border-radius:8px; box-shadow:0 8px 18px rgba(0,0,0,0.08); }
  .caption { font-size:0.88em; color:#666; margin-top:8px; text-align:center; }
  .two-col { display:flex; gap:20px; align-items:flex-start; }
  .col { flex:1; min-width:0; }
---

---
marp: true
theme: default
paginate: true
size: 16:9
style: |
  /* シンプルな全体スタイル */
  section { font-family: "Helvetica Neue", Arial, sans-serif; color:#222; padding:28px; }
  h1 { font-size:40px; margin:0 0 8px 0; }
  .subtitle { color:#666; margin:0 0 18px 0; }
  .center { display:flex; justify-content:center; align-items:center; }
  .rounded { border-radius:8px; box-shadow:0 8px 18px rgba(0,0,0,0.08); }
  .caption { font-size:0.88em; color:#666; margin-top:8px; text-align:center; }
  .two-col { display:flex; gap:20px; align-items:flex-start; }
  .col { flex:1; min-width:0; }
---

<!-- タイトル -->
<section>
  <div>
    <h1>シンプルなHTML + &lt;img&gt; サンプル</h1>
    <p class="subtitle">Obsidian + Marp で使う最小限のテンプレート</p>
    <p>発表者: <strong>Kei Adachi</strong></p>
  </div>
  <!-- 画像は vault 内の ./assets/photo.jpg を参照してください -->
  <div class="center" style="margin-top:18px;">
    <img src="./assets/チェリー4.jpg" alt="タイトル画像" width="250" class="rounded">
  </div>
</section>

---

<!-- シンプル画像スライド -->
## 画像(HTMLのimgタグを使用)
<div class="center" style="flex-direction:column;">
  <img src="./assets/チェリー2.jpg" alt="ヒーロー画像" width="400" class="rounded">
  <div class="caption">キャプション: 画像の説明（./assets/柴犬_ひまわりエリザベスカラー.jpg）</div>
</div>

<!-- Presenter notes:
- 画像は相対パスで指定してください
- エクスポート時は --allow-local-files が必要なことがあります
-->

---

## 2カラム（画像 + 要点）
<div class="two-col">
  <div class="col">
    <h3>ポイント</h3>
    <ul>
      <li>HTMLタグ（&lt;img&gt;）は問題なく使えます</li>
      <li>クラスや style を付けて見た目を調整できます</li>
      <li>エクスポート時はローカル画像の扱いに注意</li>
    </ul>
  </div>
  <div class="col">
    <img src="./assets/AWS.png" alt="ダイアグラム" width="70%" class="rounded">
    <div class="caption">図: AWSの構成図（./assets/AWS.png）</div>
  </div>
</div>

---

## コードを少し見せる
以下は短いコードの例です（Markdown のコードブロックを使用）。

```javascript
function greet(name) {
  return `こんにちは、${name}さん`;
}
console.log(greet('Kei'));

```
---

# 最後に
ご清聴ありがとうございました。  
- Email: you@example.com

プロジェクトルート/
├─ assets/
│  ├─ image1.png
│  ├─ image2.jpg
│  └─ ...（画像ファイル）
└─ Marpサンプル.md