Markdown で画像を貼るには? サイズの指定や横並びはできる?

Markdown で画像を出すには、リンクの書き方の頭に「!」をつけて、![説明の文](image.png) と書きます。[ ] の中は、画像が見えない人や、画像が読み込めないときに代わりに伝わる説明(代替テキスト)です。

標準の Markdown(CommonMark・GFM)には、画像の大きさや並べ方を指定する書き方はありません。HTML が使えるところでは、<img src="image.png" width="300"> のように HTML で書いて大きさを決めます。

画像は、どう書く?

  • ネットの画像

    例![山の写真](https://example.com/mountain.jpg)
  • 同じ場所のファイル

    例![図 1](./images/figure1.png)
  • 説明(タイトル)つき

    例![図 1](./images/figure1.png "図のタイトル")
  • 画像を押すとリンク先へ

    例[![図 1](./images/figure1.png)](https://example.com)

画像のファイルは、Markdown の文書の中には入りません。文書には「どこにある画像か」だけを書くので、文書を別の場所に移したり人に渡したりすると、画像が見えなくなることがあります。画像も一緒に渡すか、ネットに置いた画像の URL を書きます。

[ ] の中の説明(代替テキスト)には、何を書く?

画像が伝えたいことを短く書きます。GitHub は、代替テキストを「画像の情報を短い文に置き換えたもの」と案内しています。CommonMark の仕様でも、代替テキストは太字などの書式のない、ただの文字として扱われます。

代替テキストの例

![3 月の売上は 2 月より 2 割多い棒グラフ](./sales.png)

画像のサイズを指定したり、横に並べたりできる?

Markdown の書き方には、大きさの指定も、横並びの指定もありません。HTML が使えるところでは、HTML の <img> で書きます。

HTML で大きさを決める例

<img src="./images/figure1.png" alt="図 1" width="300"> <img src="./a.png" alt="A" width="45%"> <img src="./b.png" alt="B" width="45%">

2 つの <img> を同じ行に続けて書くと、横に並んで表示されることが多いです。ただし、HTML が使えるかどうか、どの属性が残るかはアプリやサイトによって違い、HTML を消すところでは表示されません。

参考にした資料

あわせて読みたい

Markdown の書き方の記事を、すべて見る
お困りですか?使い方のご質問、機能のご要望、不具合のご報告など、お気軽にご連絡ください。
お問い合わせ →