Initial commit

skills/marp-slide/references/image-patterns.md

@@ -0,0 +1,288 @@
+# Marp 画像記法リファレンス
+
+Marpit公式の画像記法に基づく、画像の配置とスタイリング方法。
+
+公式ドキュメント: https://marpit.marp.app/image-syntax
+
+## 基本的な画像挿入
+
+### 通常の画像
+
+```markdown
+![](image.png)
+![代替テキスト](image.png)
+```
+
+画像はコンテンツとして表示されます。
+
+### サイズ指定
+
+Marpでは画像にサイズキーワードを追加可能：
+
+```markdown
+![width:600px](image.png)
+![height:400px](image.png)
+![w:600px h:400px](image.png)
+```
+
+**サポートされる単位**:
+- `px` - ピクセル
+- `%` - パーセント
+- `em`, `rem`, `cm`, `mm`, `in`, `pt`, `pc`
+
+**省略形**:
+- `w:` = `width:`
+- `h:` = `height:`
+
+## 背景画像 (`bg`キーワード)
+
+### 基本的な背景画像
+
+```markdown
+![bg](image.png)
+```
+
+画像をスライドの背景として配置します。テキストコンテンツと重ならず、背景に配置されます。
+
+### 背景サイズキーワード
+
+```markdown
+![bg fit](image.png)
+![bg cover](image.png)
+![bg contain](image.png)
+![bg auto](image.png)
+```
+
+| キーワード | 動作 | CSS相当 |
+|----------|------|--------|
+| `fit` | アスペクト比を保ちスライド内に収める | `background-size: contain` |
+| `cover` | アスペクト比を保ちスライド全体を覆う | `background-size: cover` |
+| `contain` | `fit`と同じ | `background-size: contain` |
+| `auto` | 元のサイズ | `background-size: auto` |
+
+### 背景サイズ（数値指定）
+
+```markdown
+![bg 80%](image.png)
+![bg 1280px](image.png)
+![bg 50% 80%](image.png)
+```
+
+CSSの`background-size`プロパティと同じ構文をサポート。
+
+## 分割背景（Split Backgrounds）
+
+複数の背景画像を使って画面を分割できます。
+
+### 基本的な分割
+
+```markdown
+![bg](image1.png)
+![bg](image2.png)
+```
+
+2つの画像が左右に分割表示されます。
+
+### 3分割以上
+
+```markdown
+![bg](image1.png)
+![bg](image2.png)
+![bg](image3.png)
+```
+
+3つ以上の画像は等分に分割されます。
+
+### 分割方向の指定
+
+デフォルトは水平分割（horizontal）ですが、垂直分割も可能：
+
+```markdown
+![bg vertical](image1.png)
+![bg](image2.png)
+```
+
+`vertical`キーワードで垂直分割に変更。
+
+### 左右の配置指定
+
+```markdown
+![bg left](image.png)
+```
+
+画像を左側に配置し、右側にテキストスペースを確保。
+
+```markdown
+![bg right](image.png)
+```
+
+画像を右側に配置し、左側にテキストスペースを確保。
+
+### サイズ比率の指定
+
+```markdown
+![bg left:33%](image.png)
+```
+
+左側33%に画像、右側67%にテキストスペース。
+
+```markdown
+![bg right:60%](image.png)
+```
+
+右側60%に画像、左側40%にテキストスペース。
+
+## フィルター効果
+
+### 明度調整
+
+```markdown
+![brightness:0.5](image.png)
+![brightness:1.5](image.png)
+```
+
+値の範囲: 0（真っ黒）〜 1（通常）〜 2以上（明るく）
+
+### コントラスト
+
+```markdown
+![contrast:0.8](image.png)
+![contrast:1.5](image.png)
+```
+
+### ぼかし
+
+```markdown
+![blur:10px](image.png)
+```
+
+### グレースケール
+
+```markdown
+![grayscale](image.png)
+![grayscale:1](image.png)
+```
+
+値の範囲: 0（カラー）〜 1（完全なグレースケール）
+
+### セピア
+
+```markdown
+![sepia](image.png)
+![sepia:0.8](image.png)
+```
+
+### 色相回転
+
+```markdown
+![hue-rotate:180deg](image.png)
+```
+
+### 反転
+
+```markdown
+![invert](image.png)
+![invert:0.8](image.png)
+```
+
+### 透明度
+
+```markdown
+![opacity:0.5](image.png)
+```
+
+### 彩度
+
+```markdown
+![saturate:2](image.png)
+```
+
+### 複数のフィルター
+
+```markdown
+![brightness:1.2 contrast:1.1 saturate:1.3](image.png)
+```
+
+## 実用的なパターン例
+
+### パターン1: 左にテキスト、右に画像
+
+```markdown
+## プロダクト紹介
+
+![bg right:40%](product.png)
+
+- 特徴1
+- 特徴2
+- 特徴3
+```
+
+### パターン2: 背景画像 + オーバーレイテキスト
+
+```markdown
+![bg brightness:0.5](hero.png)
+
+# キャッチコピー
+
+サブテキスト
+```
+
+暗くした背景の上に白いテキストを配置。
+
+### パターン3: 複数画像の比較
+
+```markdown
+![bg left:50%](before.png)
+![bg right:50%](after.png)
+```
+
+Before/Afterを左右に並べる。
+
+### パターン4: 縦並び比較
+
+```markdown
+![bg vertical](image1.png)
+![bg](image2.png)
+```
+
+上下に画像を配置。
+
+### パターン5: サイズ指定した通常画像
+
+```markdown
+## 図解
+
+![w:600px](diagram.png)
+
+上記の図は...
+```
+
+### パターン6: 3分割レイアウト
+
+```markdown
+![bg](image1.png)
+![bg](image2.png)
+![bg](image3.png)
+```
+
+### パターン7: フィルター効果を使った背景
+
+```markdown
+![bg blur:5px brightness:0.7](background.png)
+
+# 見やすいテキスト
+
+ぼかしと暗さで背景を控えめに
+```
+
+## 注意事項
+
+1. **背景画像とテキスト**: `![bg]`画像は背景レイヤーに配置され、テキストと重なりません
+2. **複数背景の順序**: 記述順に左から右（または上から下）に配置されます
+3. **フィルター対応**: すべてのフィルターがすべての環境で動作するとは限りません
+4. **相対パス**: 画像パスはMarkdownファイルからの相対パスで指定
+
+## 公式リファレンス
+
+詳細は公式ドキュメントを参照：
+- **Image syntax**: https://marpit.marp.app/image-syntax