gh-shin902-shi-marketplace-marp-slide/skills/marp-slide/references/image-patterns.md

Marp 画像記法リファレンス

Marpit公式の画像記法に基づく、画像の配置とスタイリング方法。

公式ドキュメント: https://marpit.marp.app/image-syntax

基本的な画像挿入

通常の画像

![](image.png)
![代替テキスト](image.png)

画像はコンテンツとして表示されます。

サイズ指定

Marpでは画像にサイズキーワードを追加可能：

![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キーワード)

基本的な背景画像

![bg](image.png)

画像をスライドの背景として配置します。テキストコンテンツと重ならず、背景に配置されます。

背景サイズキーワード

![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

背景サイズ（数値指定）

![bg 80%](image.png)
![bg 1280px](image.png)
![bg 50% 80%](image.png)

CSSのbackground-sizeプロパティと同じ構文をサポート。

分割背景（Split Backgrounds）

複数の背景画像を使って画面を分割できます。

基本的な分割

![bg](image1.png)
![bg](image2.png)

2つの画像が左右に分割表示されます。

3分割以上

![bg](image1.png)
![bg](image2.png)
![bg](image3.png)

3つ以上の画像は等分に分割されます。

分割方向の指定

デフォルトは水平分割（horizontal）ですが、垂直分割も可能：

![bg vertical](image1.png)
![bg](image2.png)

verticalキーワードで垂直分割に変更。

左右の配置指定

![bg left](image.png)

画像を左側に配置し、右側にテキストスペースを確保。

![bg right](image.png)

画像を右側に配置し、左側にテキストスペースを確保。

サイズ比率の指定

![bg left:33%](image.png)

左側33%に画像、右側67%にテキストスペース。

![bg right:60%](image.png)

右側60%に画像、左側40%にテキストスペース。

フィルター効果

明度調整

![brightness:0.5](image.png)
![brightness:1.5](image.png)

値の範囲: 0（真っ黒）〜 1（通常）〜 2以上（明るく）

コントラスト

![contrast:0.8](image.png)
![contrast:1.5](image.png)

ぼかし

![blur:10px](image.png)

グレースケール

![grayscale](image.png)
![grayscale:1](image.png)

値の範囲: 0（カラー）〜 1（完全なグレースケール）

セピア

![sepia](image.png)
![sepia:0.8](image.png)

色相回転

![hue-rotate:180deg](image.png)

反転

![invert](image.png)
![invert:0.8](image.png)

透明度

![opacity:0.5](image.png)

彩度

![saturate:2](image.png)

複数のフィルター

![brightness:1.2 contrast:1.1 saturate:1.3](image.png)

実用的なパターン例

パターン1: 左にテキスト、右に画像

## プロダクト紹介

![bg right:40%](product.png)

- 特徴1
- 特徴2
- 特徴3

パターン2: 背景画像 + オーバーレイテキスト

![bg brightness:0.5](hero.png)

# キャッチコピー

サブテキスト

暗くした背景の上に白いテキストを配置。

パターン3: 複数画像の比較

![bg left:50%](before.png)
![bg right:50%](after.png)

Before/Afterを左右に並べる。

パターン4: 縦並び比較

![bg vertical](image1.png)
![bg](image2.png)

上下に画像を配置。

パターン5: サイズ指定した通常画像

## 図解

![w:600px](diagram.png)

上記の図は...

パターン6: 3分割レイアウト

![bg](image1.png)
![bg](image2.png)
![bg](image3.png)

パターン7: フィルター効果を使った背景

![bg blur:5px brightness:0.7](background.png)

# 見やすいテキスト

ぼかしと暗さで背景を控えめに

注意事項

1. 背景画像とテキスト: ![bg]画像は背景レイヤーに配置され、テキストと重なりません
2. 複数背景の順序: 記述順に左から右（または上から下）に配置されます
3. フィルター対応: すべてのフィルターがすべての環境で動作するとは限りません
4. 相対パス: 画像パスはMarkdownファイルからの相対パスで指定

公式リファレンス

詳細は公式ドキュメントを参照：

• Image syntax: https://marpit.marp.app/image-syntax