Markdown で2枚の画像を横並びにする：配置と書き出し
実際の画像を GFM テーブルに並べ、中央寄せだけでは列幅が等しくならない理由を確認します。元画像の比率と切り取りをそろえて書き出し、狭い画面で読みにくい時は同じ素材を縦に並べ、説明と元画像へのリンクを添えます。
変更前後を比較するには、どちらがどの状態かすぐに分かる2枚の画像が必要です。Markdown コンバーターを開き、共有しやすい1枚の比較画像にまとめましょう。まず元画像をそろえ、分かりやすいラベルを付けます。Markdown 自体には、それぞれを必ず利用可能幅の半分にする共通の指定方法はありません。
この例では、草稿のチェックリストと確認済みの版という実際のサンプル画像を使います。元画像の幅は同じです。2列の GFM テーブルで、各画像の上にラベルを置き、両方のセルを中央寄せにします。
# Before and after review
| Before | After |
|:--:|:--:|
|  |  |
Both images use the same source width.
これは宣伝用の表紙ではなく、レンダリングした比較結果です。両方の状態を同時に見るレビュー資料などに使えます。ラベルと画像の説明があるため、色だけに頼らず区別できます。
表は GFM の拡張機能です。配置指定の行はセル内の位置を決めますが、列幅を必ず等しくするわけではありません。画像サイズ、内容、レンダラーのスタイルも配置に影響します。書き出す前に、実際に使う環境でプレビューしてください。
比較できる範囲を切り出し、縦横比をそろえます。一方の画像に大きな余白があり、他方がぴったり切り抜かれていると、列幅が同じでも対象の大きさはそろいません。対称にするためだけに、公平な比較に必要な情報を削らないでください。
アクセスできる画像アドレスを使い、両方の読み込みが終わってから書き出します。ログインが必要な管理画面の URL は、自分のブラウザーで開けてもレンダラーからは取得できない場合があります。共有する権利のある画像だけを使い、非公開情報は元画像から取り除きます。
2枚を並べた PNG は固定された1つの構図です。狭い欄に置くと両方が一緒に縮み、自動で縦並びにはなりません。想定する最小の表示位置で確認してください。片方でも読みにくい場合は、文字をさらに小さくするより、縦並び版を公開するか元画像へリンクします。
同じ素材を縦に並べる Markdown の例です。
## Before
## After
ページ内の Markdown テーブルが折り返されるか、はみ出すかはレンダラーによります。レスポンシブなギャラリーと同じ挙動は期待できません。公開先が HTML と CSS を許可する場合は細かく制御できますが、対応とフィルタリングはそのシステム次第です。通常の Markdown による代替も残しましょう。
両方のラベルに余白を取り、ダウンロードした画像の下端が切れていないか確認します。周辺の本文で重要な違いを説明し、細部を見る必要がある場合は元画像へのリンクを添えます。比較画像は説明を助けるもので、説明そのものの代わりではありません。
2枚の比較画像を作成する。続けて Markdown で画像を使うための実践方法や読みやすい Markdown テーブルのガイドを参照してください。