Markdownで画像サイズ（幅・高さ）を指定・
中央揃えする方法
最終更新：2026年10月2日
「画像を貼ったら画面いっぱいに巨大化してしまう」「幅を小さくして中央に寄せたい」— Markdown（マークダウン）の標準記法  には、画像サイズや位置を指定する機能がありません。このページでは、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> タグを使うのが一般的な解決策です（使えるサービスは実際に試した結果を参照）。
方法1: HTMLのimgタグでサイズを指定する（おすすめ）
画像を縮小・拡大したいときは、 の代わりに <img> タグを記述します。width属性だけを指定すると、画像の縦横比（アスペクト比）を崩さずに綺麗にリサイズされます。
ピクセル（px）で固定サイズにする
<img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=600&auto=format&fit=crop&q=60" alt="ノートPC" width="240">
パーセント（％）で画面幅に合わせる（レスポンシブ）
スマホやタブレットでもはみ出さず、画面幅に応じた比率で表示したい場合は、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%">
方法2: 画像を中央揃え・右寄せにする方法
ブログのアイキャッチや図解を中央に配置したいときは、<div align="center"> で囲むのが一番簡単です。ただし、Qiitaでは align="center" が効かず、左寄せのまま表示されます（2026年10月2日に確認）。中央になるのはGitHubと、このビューアーです。
<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>
▲ 図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"> |
| Before | After |
|---|---|
 |
|
方法4: サイズ指定した画像にリンクを貼る
画像をクリックしたときに特定の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>
主なサービスで実際に試した結果（2026年10月2日）
同じ書き方を6か所に貼って、表示を確かめました。
| 書き方 | GitHub | Qiita | Zenn | Notion | note | 当 |
|---|---|---|---|---|---|---|
標準  | ○ | ○ | ○ | ○ | × | ○ |
<img width="200"> | ○ | ○ | × | × | × | ○ |
<img width="60%"> | ○ | ○ | × | × | × | ○ |
style="width:30%" | × | × | × | × | × | ○ |
中央揃え align="center" | ○ | × | × | × | × | ○ |
| 2枚の横並び（並べる・表） | ○ | ○ | × | × | × | ○ |
| リンク付き画像 | ○ | ○ | × | × | × | ○ |
Zenn式  | × | × | ○ | × | × | × |
GitHubとQiitaは <img> の width で大きさを変えられます。ただし中央揃えが効くのはGitHubだけで、Qiitaでは align="center" が消されて左寄せのままになります。style で書いた幅は、どちらでも無視されて原寸で表示されました。
Zennは <img> タグが使えず、タグが文字のまま表示されます。代わりにZenn独自の書き方  で幅を指定します。
Notionは画像を貼ったあと、Notionの画面上で左右の取っ手をドラッグして幅を変えます。noteは記法では画像を入れられない（貼ると行ごと消えた）ので、エディタの画像ボタンを使います。
画像の配置やサイズ、その場で確認しませんか？
コピペするだけでリアルタイムプレビュー。完成したMarkdown/HTMLはワンクリックでコピーできます。
よくある質問
画像が表示されない・壊れたアイコンになる原因は？
主な原因は「画像のURLが間違っている」「ローカルの絶対パス（C:\...）を指定している」「画像サーバーが直リンク（ホットリンク）をブロックしている」のいずれかです。Web上で公開されたhttpsの画像URLを使用してください。
heightも同時に指定したほうが良いですか？
いいえ、width のみを指定することをお勧めします。width と height の両方を手動指定すると、計算がずれた場合に画像が縦や横に潰れて不自然な歪みが生じる原因になります。
Zennで画像の大きさを変えるには？
Zennは <img> タグが使えません。 のように、URLの後ろに半角スペースと =幅x を書きます。
Markdownの標準記法だけでサイズ変更できる拡張はありますか？
Kramdownなど一部のプロセッサでは {:width="300px"} という記法が存在しますが、GitHubやQiitaではそのまま文字列として表示されてしまいます。互換性を保つならHTMLタグを使うのが最も安全です。
関連ガイド
- Markdownのリンク・画像の書き方基本 — 標準記法はこちら
- Markdownの表（テーブル）の書き方 — 表の中に画像を並べるテクニック
- Markdown記法一覧【チートシート】 — 全記法まとめ