最終投稿日：2026年06月29日
【検証環境】- Windows11 - VSCode - Chrome - Edge
目次
○ マークダウンとは？
[誕生の経緯][書式][サンプル]
○ Markdown（書式）
[個別コード説明][表の整形][mermaidによるフロー図]
○ Markdown（ブラウザ）
プラグイン導入により、ブラウザからマークダウンが確認できます
Markdown（マークダウン）
マークダウンとは
マークダウンとは『マークアップ言語』の一つです。
『マークアップ言語？何それ、おいしいの？』と思った方もいるかもしれません。
でも実は、あなたが今見ているこの記事自体が《HTML》というマークアップ言語で書かれています。
※ HTML = Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ） 試しに画面を右クリックして「ページのソースを表示」を押してみてください。
タグだらけで、正直かなり読みにくいはずです。 そこで生まれたのが、
『プレーンテキストとして読みやすく、同時に HTML に変換しやすい文章』を実現するための記法。 それが “マークダウン（Markdown）” です。 Markdown は 2004 年に発表され、その後 GitHub が採用したことで世界的に普及しました。
そして現在（2026年）は AI 時代の真っただ中。
軽量で構造化され、HTML にも即変換できる Markdown を AI が見逃すはずがありません。 むしろ “大好物” と言っていいほど相性が良い言語です。 IT の現場では、いまだにドキュメントをExcelで作成しているケースも多いでしょう。
しかし、そのドキュメントは本当にプログラム改修の役に立っていますか？
クライアント納品物としての体裁ばかりを重視し、肝心の「開発者が読みやすい構造」になっていないことも少なくありません。 これからは “AI” がドキュメントを “秒” で生成する時代になります。
そのとき “AI” が扱う言語は、精度・構造・変換性の観点から見ても当然 “Markdown” が選ばれるはずです。 伝えたいことは山ほどありますが、前置きはこのくらいにしておきましょう。
ただ一つだけ確実に言えることがあります。 Markdown を覚えて損はない。
【否】“AI” 時代を生き抜くための必須言語です。
でも実は、あなたが今見ているこの記事自体が《HTML》というマークアップ言語で書かれています。
※ HTML = Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ） 試しに画面を右クリックして「ページのソースを表示」を押してみてください。
タグだらけで、正直かなり読みにくいはずです。 そこで生まれたのが、
『プレーンテキストとして読みやすく、同時に HTML に変換しやすい文章』を実現するための記法。 それが “マークダウン（Markdown）” です。 Markdown は 2004 年に発表され、その後 GitHub が採用したことで世界的に普及しました。
そして現在（2026年）は AI 時代の真っただ中。
軽量で構造化され、HTML にも即変換できる Markdown を AI が見逃すはずがありません。 むしろ “大好物” と言っていいほど相性が良い言語です。 IT の現場では、いまだにドキュメントをExcelで作成しているケースも多いでしょう。
しかし、そのドキュメントは本当にプログラム改修の役に立っていますか？
クライアント納品物としての体裁ばかりを重視し、肝心の「開発者が読みやすい構造」になっていないことも少なくありません。 これからは “AI” がドキュメントを “秒” で生成する時代になります。
そのとき “AI” が扱う言語は、精度・構造・変換性の観点から見ても当然 “Markdown” が選ばれるはずです。 伝えたいことは山ほどありますが、前置きはこのくらいにしておきましょう。
ただ一つだけ確実に言えることがあります。 Markdown を覚えて損はない。
【否】“AI” 時代を生き抜くための必須言語です。
マークダウンを書いてみよう
「書いてみよう」と言ったら当然
Hello World.ですよね！
○ 基本ルール
・マークダウンファイルの拡張子は「.md」となります。
・文字コードは厳密なきまりはありませんが、時代の流れ的に「UTF-8」一択です。
・改行コードはもうお分かりですね。「LF」一択です。
・文字コードは厳密なきまりはありませんが、時代の流れ的に「UTF-8」一択です。
・改行コードはもうお分かりですね。「LF」一択です。
○ Hello World
ファイル名は何でも良いので「hoge.md」辺りで保存して下さい。
あ、因みに「VSCode」持ってますか？
お持ちでない方はこちらから環境構築して下さいね。 では「hoge.md」をVSCodeにぶん投げて（ドロップ）みましょう。
当然「Hello World」って表示されてますよね。 では次に[Ctrl]+[Shift]+[v]を押下してみましょう。（ビューモード）
おぉ～。って、普通に「Hello World」って表示されてるだけです。 う～ん。実感わきませんよね。
ではもう一度[Ctrl]+[Shift]+[v]を押下して編集モードに戻ります。
テキストの内容を『# Hello World』として、再度ビューモードで確認してみましょう。 おぉ～ どうですか。文字が大きくなりましたよね。
そう。これがマークダウン言語なのです！！
あ、因みに「VSCode」持ってますか？
お持ちでない方はこちらから環境構築して下さいね。 では「hoge.md」をVSCodeにぶん投げて（ドロップ）みましょう。
当然「Hello World」って表示されてますよね。 では次に[Ctrl]+[Shift]+[v]を押下してみましょう。（ビューモード）
おぉ～。って、普通に「Hello World」って表示されてるだけです。 う～ん。実感わきませんよね。
ではもう一度[Ctrl]+[Shift]+[v]を押下して編集モードに戻ります。
テキストの内容を『# Hello World』として、再度ビューモードで確認してみましょう。 おぉ～ どうですか。文字が大きくなりましたよね。
そう。これがマークダウン言語なのです！！
書式サンプル
マークダウン言語を『ぎゅっ』っとまとめたサンプルを以下に記載します。
○ サンプル
# 見出し1（タイトル）
## 見出し2
### 見出し3 本文はそのまま書くだけでOKです。 ---
# 🔹 強調 **太字**
*斜体*
~~取り消し線~~
--- # 🔹 箇条書き（リスト） - りんご
- みかん
- バナナ
- ネスト（入れ子）も可能 1. 番号付きリスト
2. その2
3. その3
--- # 🔹 引用 > これは引用です
> 複数行もOK
--- # 🔹 コード インラインコードは `こう書く`。 複数行コードは：
```php
<?php
echo "Hello Markdown!";
```
これをビューモードで開くと、マークダウンの素晴らしさが確認できると思います。
## 見出し2
### 見出し3 本文はそのまま書くだけでOKです。 ---
# 🔹 強調 **太字**
*斜体*
~~取り消し線~~
--- # 🔹 箇条書き（リスト） - りんご
- みかん
- バナナ
- ネスト（入れ子）も可能 1. 番号付きリスト
2. その2
3. その3
--- # 🔹 引用 > これは引用です
> 複数行もOK
--- # 🔹 コード インラインコードは `こう書く`。 複数行コードは：
```php
<?php
echo "Hello Markdown!";
```
