Markdownのリンク・画像の書き方
サイズ指定・別タブ・画像リンクも解説
Markdown（マークダウン）のリンクは [テキスト](URL)、画像は先頭に ! を付けた  で書きます。この2つはセットで覚えるのが近道です。このページでは基本から、画像のサイズ指定・新しいタブで開く方法・画像リンクなどの応用、表示されないときの解決法までまとめました。無料のMarkdownビューアーに貼り付ければ、その場で表示を確認できます。
リンクの基本の書き方
リンクは [表示テキスト](URL) の形式です。角かっこが先、丸かっこが後と覚えます。かっこの間にスペースは入れません。
詳しくは[Markdown Viewer](https://markdown-viewer.net/)をご覧ください。
詳しくはMarkdown Viewerをご覧ください。
リンクの応用（タイトル・自動リンク・ページ内リンク）
タイトル付きリンク
URLの後ろに半角スペースを空けて "タイトル" を書くと、マウスを乗せたときにツールチップが表示されます。
[公式サイト](https://markdown-viewer.net/ "無料のMarkdownビューアー")
公式サイト（マウスオーバーでタイトル表示）
URLをそのままリンクにする（自動リンク）
URLを < > で囲むとそのままリンクになります。GFM対応ツール（GitHubなど）では、囲まなくてもURLを書くだけで自動リンクになります。
<https://markdown-viewer.net/>
ページ内リンク（アンカーリンク）
見出しへのページ内リンクは [目次へ](#見出しのテキスト) のように書きます。見出しテキストは小文字になり、スペースはハイフンに変換されるのが一般的ですが、変換ルール（特に日本語見出しの扱い）はサービスごとに異なるため、動作確認が必要です。
リンクを新しいタブで開く
標準のMarkdown記法に「新しいタブで開く」指定はありません。必要な場合はHTMLの <a> タグで書きます。
<a href="https://markdown-viewer.net/" target="_blank" rel="noopener">新しいタブで開く</a>
target="_blank" を使うときは、セキュリティのため rel="noopener" を併記するのが定番です。なお、はてなブログ等のブログサービスでは、貼り付けたHTML側の設定がそのまま活きます。画像の基本の書き方
画像はリンクの先頭に !（半角エクスクラメーション）を付けた  で表示します。代替テキスト（alt）は、画像が読み込めないときの表示や、スクリーンリーダー・画像検索SEOで使われる重要な情報です。
画像のサイズを指定する
標準のMarkdown記法では画像のサイズ指定はできません。サイズを変えたいときは、HTMLの <img> タグを使うのが最も確実です。
<img src="/favicon.svg" alt="ロゴ" width="40">
一部のサービスには独自のサイズ指定記法があります（例: Obsidianの ）。ただし他のツールに持っていくと効かないため、汎用性を重視するなら <img> タグをおすすめします。
画像にリンクを付ける（画像リンク）
「画像をクリックするとリンク先に飛ぶ」形は、リンク記法の中に画像記法を入れ子にすることで作れます。バナーやバッジでよく使う書き方です。
[](https://markdown-viewer.net/)
（画像がリンクになっています）
リンク・画像が表示されない原因
| 症状 | よくある原因 | 直し方 |
|---|---|---|
| 記号がそのまま表示される | [ ]( ) の間に余計なスペースがある／全角かっこを使っている | 半角の []() を隙間なく書く |
| 画像が壊れたアイコンになる | 画像URLが間違っている・画像が非公開 | URLをブラウザで直接開いて確認する |
| ローカルの画像が出ない | 相対パスの基準が違う・オンラインツールからローカルファイルは参照不可 | 画像をアップロードしてURLで参照する |
| リンクにならず文字のまま | ! や記号の前後に必要な要素が欠けている | 記法一覧で形を再確認する |
リンクや画像の表示、その場で確認しませんか？
コピペするだけで即プレビュー。ブログ用のHTMLもワンクリックでコピーできます。
よくある質問
画像を中央寄せしたい
Markdown記法にはないため、HTMLで <p align="center"> や <div style="text-align:center"> で囲むか、表示側のCSSで指定します。
代替テキスト（alt）は省略していい？
表示自体は  でも動きますが、アクセシビリティと画像SEOの観点から、画像の内容を説明するaltを書くことを強くおすすめします。
表のセルの中に画像やリンクは入れられますか？
はい、どちらもセル内で使えます。表の書き方は表（テーブル）の書き方をご覧ください。