ぶりぶーです。今回は、Markdown記法でスライドを作成できるVS Codeの拡張機能「Marp for VS Code」にて、画像を挿入する基本的な方法を紹介したいと思います！
想定環境
- VS Code
- TeX Live 2023
- Marp for VS Code
画像の挿入
元の画像サイズのまま挿入する方法です。
次の書式を用います。
ファイルパスについて
画像ファイルのパスは、以下を満たすように記述します。
- 編集中のMarkdownファイルから見た相対パス
- パスの区切り文字は「/」や「\」
- 拡張子（.pngや.jpgなど）まで含める
パス記述の例
ファイル階層の例
mdファイル
figフォルダ / hogehoge.png
（mdファイルとfigフォルダは同じ階層）
書式
表示例
画像のサイズを変更（インライン画像）
挿入しただけでは大きすぎる、小さすぎることがあります。その場合は画像のサイズを変更しましょう。
書式
コマンド
画像の幅（横）や高さ（縦）を指定できます。
| キーワード | 意味 |
| width | 幅 |
| w | |
| height | 高さ |
| h |
サイズの指定には次の単位がよく使われます。
| 単位 | 意味 |
| px | 画面のピクセル数 |
| （単位無指定） | |
| em | １文字あたりの大きさ |
| cm | センチ |
%やvh、vwなどは指定できない仕様です。これらのキーワードを組み合わせて、次の例のように指定します。
複数のキーワードを指定する際には半角スペースで区切ります。
例
例１
幅300px、高さ200px
例２
幅10em、幅と高さの比率保持
縦横比を崩したくないけどもう少し小さく（あるいは大きく）したい場合に便利な指定方法です。
画像を背景に配置
marpでは、画像を背景にしたおしゃれなスライドを作ることができます。
書式
書式自体は上述のインライン画像と同様です。
コマンド
背景画像に設定するには、bgキーワードを用います。
その上で、以下のコマンドを指定して背景画像の配置を指定します。
まずは、画像を中央に配置するコマンドです。
中央に配置
| キーワード | 意味 |
| cover | スライド全体が覆われるように画像をリサイズ |
| （無指定） | |
| contain | スライドに収まるように画像をリサイズ |
| fit | |
| auto | 元画像のサイズ |
| x% | contain、fitのサイズからの倍率（xは数字） |
| width | 幅 |
| w | |
| height | 高さ |
| h |
左右に配置
続いて、左右に配置するコマンドです。
左右の場合は、cover指定、つまりスライド全体が画像で覆われるようなサイズが基本になります。
| キーワード | 意味 |
| left | スライド左半分に配置 |
| right | スライド右半分に配置 |
| left: x% | スライド左x%に配置（xは数字、100％はcoverに一致） |
| right x% | スライド右x%に配置（xは数字、100％はcoverに一致） |
例
例１
スライド全体が画像で覆われるように指定した背景画像
例２
スライドに含まれる最大のサイズの背景画像
例３
スライド左に40%
複数の画像を配置
さらに、複数の画像を背景に指定することもできます。
ただし、
leftとrightはbgに指定した画像すべてを１つの塊としてみなした指定になるようです。複数画像を縦に配置することもできます。
どの画像に対して指定してもOKです。
| キーワード | 意味 |
| vertical | 画像を縦に配置 |
もっと柔軟な画像配置
今回紹介した方法では、インライン画像の２段組みや、画像の回り込み配置など、より複雑な配置をすることができません。
これらの方法については以下の記事で解説しているので、ぜひ覗いてみてください。
画像の効果
おまけとして、簡単な画像加工の機能について軽く紹介します。
数値指定で細かく設定することもできます。
書式
コマンド
| キーワード | 意味 | デフォルト |
| blur | ぼかし | blur:10px |
| brightness | 明るさ | brightness:1.5 |
| contrast | コントラスト | contrast:200% |
| drop-shadow | 画像まわりの影 | drop-shadow:0,5px,10px,rgba(0,0,0,.4) |
| grayscale | グレースケール | grayscale:1 |
| hue-rotate | 色相環の反転 | hue-rotate:180deg |
| invert | ネガポジ反転 | invert:100% |
| opacity | 透明度 | opacity:.5 |
| saturate | 彩度 | saturate:2.0 |
| sepia | セピア調 | sepia:1.0 |
例
参考サイト
Marpit: The skinny framework for creating slide deck from Markdown
