アクロポリスの丘

環境に優しい選択肢

Markdown形式 part 3

マークダウン形式は、ジョン・グルーバー(英語版)というアメリカのライター・コラムニストによって、2004年に開発されたフォーマットです¹²。HTMLなどのマークアップ言語を簡略化して、手軽に文書を装飾できるようにしたものです²³。

画像のマークダウン記法は、以下のように書きます。

![代替テキスト](画像のURL)

代替テキストは、画像が表示されなかったときや、スクリーンリーダーで読み上げるときに使われます。画像の内容を簡潔に説明するものです。画像のURLは、インターネット上にアップロードされた画像のアドレスを指定します。

例えば、以下のように書くと、

![ねこ](https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg)

以下のように表示されます。

ねこ

YouTubeの動画を埋め込む記述は、以下のように書きます。

<iframe width="横幅" height="高さ" src="動画のURL" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

横幅と高さは、動画のサイズをピクセル単位で指定します。動画のURLは、YouTubeの動画ページで「共有」ボタンをクリックして「埋め込む」を選ぶと表示されるものをコピーします。frameborderは、動画の枠線の有無を指定します。0にすると枠線がなくなります。allowは、動画の再生に必要な機能を指定します。autoplayは、動画が自動的に再生されるかどうかを指定します。encrypted-mediaは、暗号化されたメディアコンテンツの再生を許可するかどうかを指定します。allowfullscreenは、動画が全画面表示できるかどうかを指定します。

例えば、以下のように書くと、

<iframe width="560" height="315" src="https://www.youtube.com/embed/5qap5aO4i9A" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

以下のように表示されます。

マークダウン形式で音楽を再生することができました。YouTubeの動画以外にも、SoundCloudSpotifyなどのサービスの埋め込みコードを使うことができます。

地図のマークダウン記法は、以下のように書きます。

![地図の代替テキスト](https://maps.google.com/maps/api/staticmap?center=緯度,経度&zoom=ズームレベル&size=横幅x高さ&markers=緯度,経度)

地図の代替テキストは、画像が表示されなかったときや、スクリーンリーダーで読み上げるときに使われます。地図の内容を簡潔に説明するものです。緯度と経度は、地図の中心となる場所の座標を指定します。ズームレベルは、地図の拡大率を指定します。1から21までの数値で、1が最も広域で21が最も詳細です。横幅と高さは、画像のサイズをピクセル単位で指定します。markersは、地図上にピンを立てる場所の座標を指定します。

例えば、以下のように書くと、

![東京駅](https://maps.google.com/maps/api/staticmap?center=35.681236,139.767125&zoom=16&size=600x400&markers=35.681236,139.767125)

以下のように表示されます。

東京駅

地図をクリックしたらGoogleマップに移動する方法は、画像のマークダウン記法をリンクのマークダウン記法で囲むことです。リンクのマークダウン記法は、以下のように書きます。

[リンクのテキスト](リンクのURL)

リンクのテキストは、画像の代替テキストと同じものを使うことができます。リンクのURLは、GoogleマップのURLを指定します。GoogleマップのURLは、以下のように作ることができます。

https://www.google.com/maps/search/?api=1&query=緯度,経度

緯度と経度は、地図の中心となる場所の座標を指定します。

例えば、以下のように書くと、

[![東京駅](https://maps.google.com/maps/api/staticmap?center=35.681236,139.767125&zoom=16&size=600x400&markers=35.681236,139.767125)](https://www.google.com/maps/search/?api=1&query=35.681236,139.767125)

以下のように表示されます。

東京駅

地図をクリックしたらGoogleマップに移動する方法は、画像のマークダウン記法をリンクのマークダウン記法で囲むことです。リンクのマークダウン記法は、以下のように書きます。

[リンクのテキスト](リンクのURL)

リンクのテキストは、画像の代替テキストと同じものを使うことができます。リンクのURLは、GoogleマップのURLを指定します。GoogleマップのURLは、以下のように作ることができます。

https://www.google.com/maps/search/?api=1&query=緯度,経度

緯度と経度は、地図の中心となる場所の座標を指定します。

例えば、以下のように書くと、

[![東京駅](https://maps.google.com/maps/api/staticmap?center=35.681236,139.767125&zoom=16&size=600x400&markers=35.681236,139.767125)](https://www.google.com/maps/search/?api=1&query=35.681236,139.767125)

以下のように表示されます。

東京駅

この地図をクリックすると、Googleマップに移動します。

地図以外にもマークダウン記法でできることはたくさんあります。例えば、以下のようなことができます。

  • 見出しを作る
  • リストを作る
  • 引用をする
  • コードを書く
  • 数式を書く
  • 表を作る
  • 水平線を引く
  • テキストを強調する

これらのマークダウン記法の詳しい説明や例は、以下のサイトを参考にしてください。

Markdown記法 サンプル集

(1) Markdown - Wikipedia. https://ja.wikipedia.org/wiki/Markdown. (2) 【マークダウン記法とは?】マークダウンの書き方を網羅的に .... https://backlog.com/ja/blog/how-to-write-markdown/. (3) 【2023年最新】Markdown(マークダウン)エディタ おすすめ17選 .... https://engineer-style.jp/articles/1699.