【コピペで使える】Markdown画像挿入の完全ガイド｜サイズ変更・リンク化・ローカル指定・トラブル対処まで網羅

Markdown（マークダウン）でドキュメント、ブログ記事、技術仕様書、README、GitHub、Notion、Obsidianなどを書く際に欠かせないのが「Markdown 画像挿入（markdown img / markdown 画像 埋め込み）」の記法です。

「Markdownで画像を挿入する基本の書き方を知りたい」「画像のサイズ（横幅・高さ）を拡大・縮小して調整したい」「画像をクリックしたら別ページに飛ぶリンク画像を作りたい」「ローカルフォルダの画像ファイルを表示させたい」「画像が表示されなくて困っている」といった疑問や課題を抱えていませんか？

Markdownの画像記法は非常にシンプルですが、標準構文だけでは画像サイズの変更ができないため、HTMLタグの併用やエディタごとの拡張記法を理解しておくことが実務では極めて重要です。

この記事では、コピペですぐに使える逆引きチートシートから、基本構文（alt・URL・title）、画像のサイズ変更（px / % / max-width）、リンク付き画像、中央揃え・回り込み配置、ローカル相対パスの書き方、主要エディタ（VS Code / GitHub / Obsidian）の便利技、画像が表示されない原因と解決策まで、網羅的かつわかりやすく徹底解説します！

【早見表】Markdown画像挿入 逆引きチートシート

まずは「今すぐ書き方を確認してコピーしたい」という方向けに、代表的なMarkdown 画像挿入の書き方一覧表を用意しました。用途に合わせてコピーしてお使いください。

![代替テキスト](https://example.com/image.png)

![代替テキスト](https://example.com/image.png "タイトル")

![ロゴ画像](./images/logo.png)

<img src="image.png" alt="説明" width="300">

<img src="image.png" alt="説明" style="width:50%; max-width:400px;">

[![代替テキスト](image.png)](https://example.com)

<p align="center">
  <img src="image.png" alt="説明" width="400">
</p>

<figure>
  <img src="image.png" alt="グラフ">
  <figcaption>図1: 売上推移グラフ</figcaption>
</figure>

1. Markdown画像挿入の基本記法（markdown img / 埋め込み）

Markdownにおける画像挿入の基本構文は、リンク記法の先頭に !（感嘆符 / エクスクラメーションマーク）を付けた形式です。

![代替テキスト](画像のURL "ツールチップタイトル")

基本の書き方とレンダリング例

実際にWeb上の画像を指定して埋め込むコード例と表示結果です。

![Markdownロゴ](https://markdown-start.com/wp-content/uploads/sample-logo.png "Markdown Startのロゴ")

2. 画像のサイズ変更・リサイズ方法（markdown 画像サイズ）

Markdownを使い始めた人が最もつまずきやすいのが、「標準のMarkdown記法には画像サイズ（width / height）を変更する構文が存在しない」という点です。

Markdownはもともと「文書構造の記述」に特化しており、デザインやスタイルの制御はHTML/CSSに委ねる思想で設計されているためです。しかし、オリジナルサイズのまま表示すると「画像が巨大すぎて画面からはみ出る」「小さすぎて文字が読めない」といった問題が起こります。ここでは実務で使える画像サイズ調整の解決手法を解説します。

方法1：HTMLの <img> タグを使う（最も確実・推奨）

Markdown文書内では、HTMLタグを直接記述してレンダリングさせることが可能です。HTMLの <img> タグに width や height、あるいは style 属性を付与することで、自由自在にサイズを変更できます。

<!-- 横幅を300ピクセルに指定（高さは縦横比を保って自動調整） -->
<img src="https://example.com/image.png" alt="サンプル画像" width="300">

<!-- 横幅と高さを両方指定 -->
<img src="https://example.com/image.png" alt="サンプル画像" width="400" height="250">

<!-- パーセンテージやCSSスタイルで指定（レスポンシブ対応） -->
<img src="https://example.com/image.png" alt="サンプル画像" style="width: 60%; max-width: 500px; height: auto;">

方法2：プラットフォーム別の拡張記法を使う

一部のMarkdownエディタやWebサービスでは、独自の画像リサイズ拡張構文がサポートされています。

3. 画像のレイアウト調整（中央揃え・回り込み・キャプション）

ドキュメントをより見やすく整理するために、画像の位置揃えやキャプション付けを行う実践テクニックです。

画像をページの中央に配置する（センタリング）

Markdownの標準記法では画像は常に左寄せになりますが、HTMLタグで囲むことで簡単に中央揃えが可能です。

<!-- 方法A: pタグのalign属性を使う（最もシンプル） -->
<p align="center">
  <img src="https://example.com/sample.png" alt="中央配置画像" width="400">
</p>

<!-- 方法B: divタグとstyle属性（CSS）を使う -->
<div style="text-align: center;">
  <img src="https://example.com/sample.png" alt="中央配置画像" style="max-width: 80%;">
</div>

テキストを画像の横に回り込ませる（左右配置）

アイコンや図解の横に説明文を流し込みたい場合は、CSSの float プロパティを使用します。

<!-- 画像を左に配置し、テキストを右側に回り込ませる -->
<div style="overflow: hidden; margin-bottom: 20px;">
  <img src="https://example.com/icon.png" alt="アイコン" width="120" style="float: left; margin: 0 15px 10px 0;">
  <p>ここに画像の右側に回り込ませたい文章を記述します。画像の横幅や余白（margin）を適切に設定することで、雑誌やブログのような美しいレイアウトが実現できます。</p>
</div>

画像にキャプション（説明文・図番号）を付ける

図表やスクリーンショットの下に「図1: システム構成図」のようなキャプションを付ける方法は2通りあります。

<!-- 方法1: HTML5の figure / figcaption タグを使う（推奨） -->
<figure style="text-align: center; margin: 20px 0;">
  <img src="https://example.com/diagram.png" alt="システム構成図" width="500">
  <figcaption style="font-size: 0.9em; color: #666; margin-top: 6px;">図1: クラウドサーバーのシステム構成図</figcaption>
</figure>

<!-- 方法2: Markdown記法＋斜体テキストで手軽に書く -->
![システム構成図](https://example.com/diagram.png)
*図1: クラウドサーバーのシステム構成図*

キャプションのスタイリングや番号の自動採番など、さらに詳しい活用法は「Markdown 画像キャプションの書き方完全ガイド」で詳しく解説しています。

4. 画像にリンクを設定する方法（クリックできる画像）

「バナー画像をクリックしたら紹介ページに飛ばしたい」「サムネイル画像をクリックしたら高解像度の元画像を開きたい」という場合は、リンク構文の中に画像構文をネスト（入れ子）します。

リンク付き画像の構文構造

[![代替テキスト](画像URL)](リンク先のURL)

実践コード例（バナー＆拡大リンク）

<!-- 例1: 外部サイトへのバナーリンク -->
[![Markdownスタートガイド](https://example.com/banner.png)](https://markdown-start.com)

<!-- 例2: サムネイルから拡大画像へのリンク（Lightbox的な活用） -->
[![製品写真（クリックで拡大）](https://example.com/thumb.jpg)](https://example.com/large.jpg)

<!-- 例3: サイズ指定＋リンク（HTMLタグを使用） -->
<a href="https://markdown-start.com" target="_blank" rel="noopener noreferrer">
  <img src="https://example.com/banner.png" alt="Markdownスタートガイド" width="350">
</a>

サイズ調整と別タブ開き（target="_blank"）を同時に行いたい場合は、上記例3のようにHTMLの <a> タグと <img> タグを組み合わせると確実です。

5. ローカル画像・プロジェクト内ファイルの指定方法（相対パス・絶対パス）

Web上のURL（https://...）だけでなく、ローカル環境（PC内やGitHubリポジトリ内）にある画像ファイルをMarkdownに埋め込む際は、ファイルパスの指定方法が重要になります。

相対パスと絶対パスの書き方

以下のようなプロジェクトのフォルダ構成を例に解説します。

my-project/
├── docs/
│   └── guide.md       ← 編集中のMarkdownファイル
├── images/
│   ├── sample.png     ← 挿入したい画像ファイル
│   └── sub/
│       └── photo.jpg
└── README.md

6. 主要エディタ・ツールでの画像挿入＆便利技

日常的にMarkdownを書くエディタやプラットフォームごとの効率的な画像挿入テクニックを紹介します。

Visual Studio Code (VS Code)

• ドラッグ＆ドロップ挿入： エクスプローラーから画像をMarkdownファイル上にドラッグ＆ドロップすると、自動的に相対パスの画像構文が挿入されます（Shiftキーを押しながらドロップでさらに柔軟に配置可能）。
• クリップボード画像の貼り付け： 拡張機能「Paste Image」などを導入すると、スクリーンショットを撮って Ctrl + Alt + V（Macは Cmd + Alt + V）を押すだけで、指定フォルダへの画像保存とMarkdown記述が一瞬で完了します。
• リアルタイムプレビュー： Ctrl + K V でエディタ横にプレビューを表示しながら画像の位置やサイズを確認できます。※ プレビュー設定の詳細は「VSCode Markdownプレビュー活用法」を参照。

GitHub / Qiita / Zenn / Notion

• GitHub（Issue / PR / ディスカッション）： 編集エリアに画像をドラッグ＆ドロップまたはクリップボード貼り付けすると、GitHubのCDNサーバーに画像が自動アップロードされ、Markdownコード（またはimgタグ）が自動挿入されます。
• Qiita / Zenn： Webエディタに画像を貼り付けるだけで専用ストレージにアップロードされ、サイズ調整用の記法が生成されます。
• Notion / Obsidian： クリップボードから貼り付けると、自動的にページ内に埋め込まれ、エディタ上でドラッグによる直感的なサイズ変更が可能です。※ Notionでの活用法は「Notion Markdown活用ガイド」をご覧ください。

7. 画像が表示されない！よくある原因トップ5と解決策

「Markdownに書いた画像が読み込めない」「壊れた画像アイコンが表示される」という場合によくある5大原因とチェックポイントです。

8. Markdownの画像挿入に関するよくある質問（FAQ）

9. まとめ

Markdownにおける画像挿入（markdown img / markdown 画像 埋め込み）は、基本構文 ![alt](url) を覚えるだけで簡単に使いこなせます。

画像サイズ変更やレイアウト調整などの応用技も身につけて、より見やすく伝わりやすいMarkdownドキュメントを作成していきましょう！

画像・メディア関連の応用おすすめガイド

• Markdown 画像キャプションの書き方完全ガイド：簡単手順と活用事例
• Markdownで動画を埋め込む究極のガイド：YouTubeやHTML5動画の埋め込み手順
• Markdownリンクの書き方完全ガイド｜相対パス・ローカルファイル・ページ内アンカーまで網羅
• MarkdownとHTMLを併用！Web記事作成でプロが知るテクニックとメリット
• VS CodeでMarkdownを効率的に使うための拡張機能と設定ガイド
• Markdown文法ガイド｜初心者向けに表・リンク・画像・コードの書き方をまとめて解説