ビューアーで試す →

Markdownで画像サイズ（幅・高さ）を指定・
中央揃えする方法

「画像を貼ったら画面いっぱいに巨大化してしまう」「幅を小さくして中央に寄せたい」— Markdown（マークダウン）の標準記法 ![alt](url) には、画像サイズや位置を指定する機能がありません。このページでは、HTML代替タグを使ったサイズ指定（px指定・％指定）や中央揃えの書き方をコピペ用コード付きで解説します。各サンプルの「🚀 ビューアーで試す」ボタンを押せば、その場でビューアーに読み込んでプレビューを確認できます。

画像リサイズ＆配置の早見表
やりたいこと書き方備考
幅を指定（px）<img src="url" width="300">縦横比を自動維持
幅を指定（％）<img src="url" width="50%">スマホ対応に最適
中央揃え<div align="center"><img ...></div>GitHubやQiitaで確実
右寄せ<div align="right"><img ...></div>キャプション等に

なぜ標準記法では画像サイズを変えられないのか

Markdownは「テキストをプレーンかつ読みやすく書く」という思想で作られたため、標準仕様（CommonMark）には画像サイズ（width/height）や配置属性の文法が盛り込まれていません。しかし、Markdown文書の中ではHTMLタグをそのまま記述することが許可されているため、HTMLの <img> タグを使うのがWeb標準かつ最も確実な解決策となります。

方法1: HTMLのimgタグでサイズを指定する（おすすめ）

画像を縮小・拡大したいときは、![alt](url) の代わりに <img> タグを記述します。width属性だけを指定すると、画像の縦横比（アスペクト比）を崩さずに綺麗にリサイズされます。

ピクセル（px）で固定サイズにする

書き方（px指定） 
<img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=600&auto=format&fit=crop&q=60" alt="ノートPC" width="240">
表示結果
ノートPC

パーセント（％）で画面幅に合わせる（レスポンシブ）

スマホやタブレットでもはみ出さず、画面幅に応じた比率で表示したい場合は、width="50%" や style="width: 50%;" を指定します。

書き方（%指定） 
<img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=600&auto=format&fit=crop&q=60" alt="ノートPC" width="60%">
表示結果
ノートPC

方法2: 画像を中央揃え・右寄せにする方法

ブログのアイキャッチや図解を中央に配置したいときは、<div align="center"> で囲むのが一番簡単で、多くのプラットフォームで動作します。

書き方（中央揃え） 
<div align="center">
  <img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=600&auto=format&fit=crop&q=60" alt="ノートPC" width="260">
  <p><small>▲ 図1: 作業環境のサンプル</small></p>
</div>
表示結果
ノートPC

▲ 図1: 作業環境のサンプル

右寄せにしたい場合は <div align="right"> に変更してください。

方法3: 2枚の画像を横並びに配置する

ビフォー・アフターの比較や複数のスクリーンショットを並べたいときは、テーブル（表）の中に画像を配置するか、1行に続けて <img> を並べます。

書き方（横並び） 
| Before | After |
| :---: | :---: |
| <img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=400" width="160"> | <img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=400" width="160"> |
表示結果
BeforeAfter

画像をクリックしたときに特定のURLへジャンプさせたい場合は、<a> タグの中に <img> タグを挟み込みます。

書き方（画像リンク） 
<a href="https://markdown-viewer.net/" target="_blank" rel="noopener">
  <img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=600" alt="Markdown Viewer" width="200">
</a>
表示結果
Markdown Viewer

主要サービス別の対応状況（GitHub・Qiita・Zenn・Notion）

サービスHTML（imgタグ）中央揃え（align）独自リサイズ記法
GitHub (README/Wiki)◯ 完全対応◯ 完全対応✕ なし
Qiita◯ 完全対応◯ 完全対応✕ なし
Zenn◯ 完全対応◯ 完全対応✕ なし
Notion✕ HTML非対応✕ HTML非対応◯ ドラッグでリサイズ可能
VS Codeプレビュー◯ 完全対応◯ 完全対応拡張機能により対応
エンジニア向けの主要プラットフォーム（GitHub、Qiita、Zenn）では、いずれもHTMLの <img> タグによるサイズ調整が公式に推奨・サポートされています。

画像の配置やサイズ、その場で確認しませんか？
コピペするだけでリアルタイムプレビュー。完成したMarkdown/HTMLはワンクリックでコピーできます。

無料のMarkdownビューアーを開く

よくある質問

画像が表示されない・壊れたアイコンになる原因は？

主な原因は「画像のURLが間違っている」「ローカルの絶対パス（C:\...）を指定している」「画像サーバーが直リンク（ホットリンク）をブロックしている」のいずれかです。Web上で公開されたhttpsの画像URLを使用してください。

heightも同時に指定したほうが良いですか？

いいえ、width のみを指定することをお勧めします。width と height の両方を手動指定すると、計算がずれた場合に画像が縦や横に潰れて不自然な歪みが生じる原因になります。

Markdownの標準記法だけでサイズ変更できる拡張はありますか？

Kramdownなど一部のプロセッサでは ![alt](url){:width="300px"} という記法が存在しますが、GitHubやQiitaではそのまま文字列として表示されてしまいます。互換性を保つならHTMLタグを使うのが最も安全です。

関連ガイド