Markdown で 2 枚の画像を横並びにする方法

このガイドは Markdown で画像を横に 2 枚並べる を扱い、画像サイズが移植可能な中核構文ではない点を理解し、安定した比較を作る方法を説明します。単なる画面キャプチャではなく、読みやすく、Markdown ソースを追跡でき、繰り返し公開できる素材を目指します。

文字、コード、表、細い線は PNG が鮮明です。写真背景は JPEG で小さくできますが、小文字が甘くなる場合があります。複数ページは PDF、Office で再編集するなら DOCX が向きます。配信先から形式を決めます。

1. 準備。 配信先に合わせ GFM 表、固有 HTML、事前合成画像から選ぶ。
2. 確認。 同じ比率の元画像と適切な alt を使い、狭い画面も試す。
3. 出力。 配信先が配置を保てない場合は一枚の比較画像として出力する。

短い例をレンダラーに貼り、実データの前に文字と余白を確認します。

| Before | After |
|:--:|:--:|
| ![Before view](https://example.com/before.png) | ![After view](https://example.com/after.png) |

CommonMark は移植しやすい中核構文を定義します。表、タスク、一部自動リンクは GFM 拡張で、環境により差が出ます。Mermaid と KaTeX は対応レンダラーが処理する別構文です。最終環境で必ず試します。

• 情報画像には意味のある alt を付ける。
• 見出しと読む順序を論理的にする。
• 明暗テーマでコントラストを確認する。
• 実際の表示寸法で見る。
• Markdown ソースを版管理する。
• 内容変更後は再出力し、画像上で文字を継ぎ足さない。

小さすぎる文字、広すぎる表、未説明の略語、不安定な遠隔画像、文脈を失う切り抜きを避けます。全 Markdown エンジンで同一描画とは言えません。拡張とテーマが境界です。

今回の事実上の境界は次の一次資料で確認しました：

• https://spec.commonmark.org/current/
• https://docs.github.com/en/get-started/writing-on-github
• https://markdowntoimage.com/

MarkdownToImage を開き、最終幅とテーマで例を試します。関連する 1 本目 と 2 本目 も参照してください。