# Markdown 要素カタログ
これは Markdown の各種要素を網羅的に収録したサンプルドキュメントや。
GitHub Flavored Markdown (GFM) を中心に、一般的な拡張構文も含めてる。
---
## 目次
- [見出し](#見出し)
- [段落とテキスト装飾](#段落とテキスト装飾)
- [リスト](#リスト)
- [リンク](#リンク)
- [画像](#画像)
- [コードブロック](#コードブロック)
- [テーブル](#テーブル)
- [引用](#引用)
- [水平線](#水平線)
- [タスクリスト](#タスクリスト)
- [脚注](#脚注)
- [定義リスト](#定義リスト)
- [数式](#数式)
- [折りたたみ](#折りたたみ)
- [アラート / Admonition](#アラート--admonition)
- [エスケープとHTML](#エスケープとhtml)
- [Mermaid ダイアグラム](#mermaid-ダイアグラム)
- [その他の要素](#その他の要素)
---
## 見出し
# h1: 最上位の見出し
## h2: セクション見出し
### h3: サブセクション
#### h4: 小見出し
##### h5: さらに小さい見出し
###### h6: 最小の見出し
代替構文の見出し（Setext スタイル）
=====================================
代替構文の小見出し
-------------------------------------
---
## 段落とテキスト装飾
これは普通の段落や。Markdown では空行を挟むことで段落が分かれる。
この行は同じ段落の続きとして扱われる。
これは新しい段落。空行で区切られてるからな。
### インライン装飾
| `*イタリック*` | *イタリック* |
| `_イタリック_` | _イタリック_ |
| `**ボールド**` | **ボールド** |
| `__ボールド__` | __ボールド__ |
| `***ボールド＆イタリック***` | ***ボールド＆イタリック*** |
| `~~取り消し線~~` | ~~取り消し線~~ |
| `` `インラインコード` `` | `インラインコード` |
| `<sup>上付き</sup>` | <sup>上付き</sup> |
| `<sub>下付き</sub>` | <sub>下付き</sub> |
| `<mark>ハイライト</mark>` | <mark>ハイライト</mark> |
| `<ins>追加</ins>` | <ins>追加</ins> |
| `<kbd>Ctrl</kbd>+<kbd>C</kbd>` | <kbd>Ctrl</kbd>+<kbd>C</kbd> |
**ボールド**の中に*イタリック*を入れたり、*イタリックの中に**ボールド**を入れたり*もできる。
### 改行
行末にスペース2つで
強制改行ができる。
あるいは `<br>` タグで<br>改行することもできる。
---
## リスト
### 順序なしリスト
- アイテム 1
- アイテム 2
- ネストされたアイテム 2-1
- ネストされたアイテム 2-2
- さらにネスト 2-2-1
- さらにネスト 2-2-2
- アイテム 3
別のマーカーでも書ける:
* アスタリスク 1
* アスタリスク 2
+ プラス 1
+ プラス 2
### 順序ありリスト
1. 最初のアイテム
2. 二番目のアイテム
3. 三番目のアイテム
1. ネストされた番号リスト
2. ネストされた番号リスト
1. さらにネスト
2. さらにネスト
4. 四番目のアイテム
### 番号が連続しない場合
1. これは1番
1. これも1と書いても
1. 自動的に連番になる
### リスト内の段落
1. 最初のアイテム
このようにインデントすると、リストアイテム内の段落になる。
さらに続けることもできる。
2. 二番目のアイテム
> リスト内に引用を入れることもできる
3. 三番目のアイテム
```
リスト内にコードブロックも入る
```
### 混合リスト
1. 順序ありの中に
- 順序なしを
- 混ぜることもできる
2. こんな感じで
- ネストする
1. さらに順序ありに戻したり
2. 自由自在や
---
## リンク
### 基本リンク
[GitHub](https://github.com)
[タイトル付きリンク](https://github.com "GitHub のホームページ")
### URL の直接記述
<https://github.com>
<user@example.com>
### 参照リンク
[参照リンクの例][ref-link]
[番号で参照][1]
[リンクテキスト自体で参照]
[ref-link]: https://example.com "参照リンクの定義"
[1]: https://example.com/numbered "番号参照"
[リンクテキスト自体で参照]: https://example.com/self-ref "自己参照"
### セクション内リンク（アンカー）
[見出しセクションに戻る](#見出し)
### 相対パスリンク
[同じリポジトリのファイル](./README.md)
[親ディレクトリのファイル](../docs/guide.md)
---
## 画像
### 基本の画像
### タイトル付き画像
### 参照スタイルの画像
![ロゴ][logo]
[logo]: https://via.placeholder.com/100x100/ff6600/ffffff?text=Logo "ロゴ画像"
### リンク付き画像
[](https://example.com)
### HTML での画像（サイズ指定）
<img src="https://via.placeholder.com/200x200/9933cc/ffffff?text=Sized" width="200" height="200" alt="サイズ指定画像">
### 画像の並列表示
<p align="center">
<img src="https://via.placeholder.com/150x150/ff0000/ffffff?text=Red" width="150">
<img src="https://via.placeholder.com/150x150/00ff00/ffffff?text=Green" width="150">
<img src="https://via.placeholder.com/150x150/0000ff/ffffff?text=Blue" width="150">
</p>
---
## コードブロック
### インラインコード
`console.log("Hello, World!")` はインラインで表示される。
バッククォートを含む場合: `` `backtick` `` のように二重にする。
### フェンスドコードブロック（言語指定あり）
#### JavaScript
```javascript
class EventEmitter {
constructor() {
this.listeners = new Map();
}
on(event, callback) {
if (!this.listeners.has(event)) {
this.listeners.set(event, []);
}
this.listeners.get(event).push(callback);
return this;
}
emit(event, ...args) {
const callbacks = this.listeners.get(event) || [];
callbacks.forEach(cb => cb(...args));
return this;
}
off(event, callback) {
const callbacks = this.listeners.get(event) || [];
this.listeners.set(
event,
callbacks.filter(cb => cb !== callback)
);
return this;
}
}
const emitter = new EventEmitter();
emitter.on("data", (msg) => console.log(`Received: ${msg}`));
emitter.emit("data", "Hello!");
```
#### TypeScript
```typescript
interface User {
id: number;
name: string;
email: string;
type PartialUser = Partial<User>;
type ReadonlyUser = Readonly<User>;
async function fetchUser(id: number): Promise<User> {
const response = await fetch(`/api/users/${id}`);
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
return response.json() as Promise<User>;
}
```
#### Python
```python
from dataclasses import dataclass, field
from typing import Optional
import asyncio
@dataclass
class Config:
host: str = "localhost"
port: int = 8080
debug: bool = False
tags: list[str] = field(default_factory=list)
async def fetch_data(url: str) -> Optional[dict]:
"""非同期でデータを取得する"""
try:
async with aiohttp.ClientSession() as session:
async with session.get(url) as response:
if response.status == 200:
return await response.json()
return None
except Exception as e:
print(f"Error: {e}")
return None
if __name__ == "__main__":
config = Config(debug=True, tags=["api", "v2"])
asyncio.run(fetch_data("https://api.example.com/data"))
```
#### Rust
```rust
use std::collections::HashMap;
#[derive(Debug, Clone)]
struct Cache<T: Clone> {
store: HashMap<String, T>,
capacity: usize,
}
impl<T: Clone> Cache<T> {
fn new(capacity: usize) -> Self {
Cache {
store: HashMap::with_capacity(capacity),
capacity,
}
}
fn get(&self, key: &str) -> Option<&T> {
self.store.get(key)
}
fn set(&mut self, key: String, value: T) -> bool {
if self.store.len() >= self.capacity && !self.store.contains_key(&key) {
return false;
}
self.store.insert(key, value);
true
}
}
fn main() {
let mut cache = Cache::new(100);
cache.set("key1".to_string(), vec![1, 2, 3]);
println!("{:?}", cache.get("key1"));
}
```
#### Shell / Bash
```bash
#!/usr/bin/env bash
set -euo pipefail
readonly LOG_FILE="/var/log/deploy.log"
log() {
echo "[$(date '+%Y-%m-%d %H:%M:%S')] $*" | tee -a "$LOG_FILE"
}
deploy() {
local env="${1:?Environment required}"
local version="${2:?Version required}"
log "Deploying v${version} to ${env}..."
git fetch origin
git checkout "v${version}"
npm ci --production
pm2 restart all
log "Deploy complete."
}
deploy "$@"
```
#### SQL
```sql
WITH monthly_sales AS (
SELECT
DATE_TRUNC('month', order_date) AS month,
product_id,
SUM(quantity * unit_price) AS revenue,
COUNT(DISTINCT customer_id) AS unique_customers
FROM orders
WHERE order_date >= '2025-01-01'
GROUP BY 1, 2
)
SELECT
m.month,
p.product_name,
m.revenue,
m.unique_customers,
RANK() OVER (PARTITION BY m.month ORDER BY m.revenue DESC) AS rank
FROM monthly_sales m
JOIN products p ON p.id = m.product_id
WHERE m.revenue > 10000
ORDER BY m.month, rank;
```
#### YAML
```yaml
version: "3.8"
services:
app:
build:
context: .
dockerfile: Dockerfile
ports:
- "3000:3000"
environment:
- NODE_ENV=production
- DATABASE_URL=postgres://db:5432/app
depends_on:
db:
condition: service_healthy
deploy:
replicas: 3
resources:
limits:
cpus: "0.5"
memory: 512M
db:
image: postgres:16-alpine
volumes:
- pgdata:/var/lib/postgresql/data
healthcheck:
test: ["CMD-SHELL", "pg_isready -U postgres"]
interval: 10s
timeout: 5s
retries: 5
volumes:
pgdata:
```
#### JSON
```json
{
"name": "sample-project",
"version": "2.0.0",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"test": "vitest run",
"lint": "eslint . --ext .ts,.tsx"
},
"dependencies": {
"react": "^19.0.0",
"react-dom": "^19.0.0"
}
}
```
#### Diff
```diff
--- a/src/config.ts
+++ b/src/config.ts
@@ -12,7 +12,9 @@ export const config = {
port: 3000,
- timeout: 5000,
+ timeout: 10000,
+ retries: 3,
+ backoff: "exponential",
logging: {
level: "info",
+ format: "json",
},
};
```
### インデントによるコードブロック
// 4スペースのインデントでもコードブロックになる
function hello() {
return "Hello!";
}
---
## テーブル
### 基本テーブル
| 名前 | 年齢 | 職業 |
|------|------|------|
| 太郎 | 28 | エンジニア |
| 花子 | 32 | デザイナー |
| 次郎 | 25 | マーケター |
### アラインメント指定
| 左寄せ | 中央寄せ | 右寄せ |
|:-------|:--------:|-------:|
| Left | Center | Right |
| テキスト | テキスト | テキスト |
| 123 | 456 | 789 |
### 装飾入りテーブル
| メソッド | エンドポイント | 説明 | ステータス |
|:---------|:--------------|:-----|:--------:|
| `GET` | `/api/users` | ユーザー一覧取得 | **安定** |
| `POST` | `/api/users` | ユーザー作成 | **安定** |
| `PUT` | `/api/users/:id` | ユーザー更新 | *ベータ* |
| `DELETE` | `/api/users/:id` | ユーザー削除 | ~~廃止予定~~ |
### 大きめのテーブル
| # | 言語 | パラダイム | 型システム | 初版 | 最新版 | 用途 |
|:-:|:-----|:----------|:----------|:-----|:------|:-----|
| 1 | JavaScript | マルチパラダイム | 動的 | 1995 | ES2025 | Web フロント/バック |
| 2 | TypeScript | マルチパラダイム | 静的 | 2012 | 5.7 | Web 全般 |
| 3 | Python | マルチパラダイム | 動的 | 1991 | 3.13 | AI/ML, Web, 自動化 |
| 4 | Rust | マルチパラダイム | 静的 | 2015 | 1.84 | システム, WebAssembly |
| 5 | Go | 手続き型 | 静的 | 2009 | 1.23 | インフラ, CLI |
| 6 | Java | オブジェクト指向 | 静的 | 1995 | 23 | エンタープライズ |
| 7 | C# | マルチパラダイム | 静的 | 2000 | 13 | ゲーム, デスクトップ |
| 8 | Swift | マルチパラダイム | 静的 | 2014 | 6.0 | Apple プラットフォーム |
---
## 引用
### 基本の引用
> これは引用文や。
> 複数行にまたがることもできる。
### ネストした引用
> 第一レベルの引用
>
> > 第二レベルのネスト引用
> >
> > > 第三レベルまでネストできる
### 引用内の装飾
> **注意**: この引用には**ボールド**、*イタリック*、`インラインコード`が含まれてる。
>
> - リストも入れられる
> - こんな感じで
>
> ```python
> # コードブロックもOK
> print("引用の中のコード")
> ```
### 出典付き引用
> 簡潔さは知恵の魂である。
>
> — ウィリアム・シェイクスピア『ハムレット』
---
## 水平線
3つのアスタリスク:
***
3つのハイフン:
---
3つのアンダースコア:
___
---
## タスクリスト
### 基本のタスクリスト
- [x] 要件定義
- [x] 設計書作成
- [x] データベース設計
- [ ] バックエンド実装
- [ ] フロントエンド実装
- [ ] テスト
- [ ] デプロイ
### ネストしたタスクリスト
- [x] フェーズ 1: 基盤構築
- [x] プロジェクト初期化
- [x] CI/CD パイプライン構築
- [x] 開発環境セットアップ
- [ ] フェーズ 2: コア機能開発
- [x] 認証モジュール
- [ ] ユーザー管理
- [ ] データ処理エンジン
- [ ] フェーズ 3: リリース準備
- [ ] パフォーマンステスト
- [ ] セキュリティ監査
- [ ] ドキュメント整備
---
## 脚注
ここに脚注の参照がある[^1]。もう一つの脚注[^long-note]もある。
インライン脚注^[これはインライン脚注の内容や]も使える。
[^1]: これが脚注の内容。シンプルな1行の脚注。
[^long-note]: 長い脚注は複数行にわたることができる。
インデントで続きの段落を書ける。
```
コードブロックも含められる
```
このように色々な要素を入れられるのが脚注の便利なところ。
---
## 定義リスト
Markdown
: 軽量マークアップ言語。プレーンテキストで書いた文書を HTML などに変換できる。
GFM
: GitHub Flavored Markdown の略。
: GitHub が独自に拡張した Markdown の方言。タスクリストやテーブルなどの機能がある。
CommonMark
: Markdown の標準仕様を策定するプロジェクト。
: 曖昧だった Markdown の仕様を厳密に定義してる。
---
## 数式
### インライン数式
アインシュタインの有名な式 $E = mc^2$ はエネルギーと質量の等価性を表す。
二次方程式の解は $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$ で求められる。
### ブロック数式
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$
$$
\mathbf{A} = \begin{pmatrix}
a_{11} & a_{12} & \cdots & a_{1n} \\
a_{21} & a_{22} & \cdots & a_{2n} \\
\vdots & \vdots & \ddots & \vdots \\
a_{m1} & a_{m2} & \cdots & a_{mn}
\end{pmatrix}
$$
$$
\nabla \times \mathbf{E} = -\frac{\partial \mathbf{B}}{\partial t}
$$
$$
\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}
$$
---
## 折りたたみ
<details>
<summary>クリックして展開</summary>
ここに折りたたまれた内容が入る。
- リストも使える
- **装飾**も効く
```javascript
console.log("コードブロックも入る");
```
</details>
<details>
<summary><strong>デフォルトで閉じてるセクション</strong></summary>
| データ1 | データ2 |
| データ3 | データ4 |
</details>
<details open>
<summary>デフォルトで開いてるセクション</summary>
`open` 属性を付けると最初から開いた状態になる。
</details>
---
## アラート / Admonition
> [!NOTE]
> 補足情報や参考になる内容をここに書く。
> [!TIP]
> 便利な使い方やベストプラクティスの紹介。
> [!IMPORTANT]
> 重要な情報。見落とすと問題が起きる可能性がある。
> [!WARNING]
> 注意が必要な内容。誤った操作をすると影響が出る。
> [!CAUTION]
> 危険な操作や破壊的な変更に関する警告。
---
## エスケープとHTML
### エスケープ文字
以下の文字はバックスラッシュでエスケープできる:
\* アスタリスク
\# ハッシュ
\- ハイフン
\+ プラス
\. ピリオド
\! エクスクラメーション
\[ ブラケット \]
\( パレン \)
\{ ブレース \}
\| パイプ
\` バッククォート
\_ アンダースコア
\~ チルダ
\\ バックスラッシュ
### HTML の直接記述
<div align="center">
<h3>HTML で中央揃え</h3>
<p>Markdown の中で HTML を直接書くこともできる。</p>
</div>
<table>
<tr>
<th>HTML テーブル</th>
<th>セルの結合も可能</th>
</tr>
<tr>
<td rowspan="2">行の結合</td>
<td>セル 1</td>
</tr>
<tr>
<td>セル 2</td>
</tr>
<tr>
<td colspan="2" align="center">列の結合</td>
</tr>
</table>
### コメント
[//]: # (これも Markdown のコメント記法の一つ)
---
## Mermaid ダイアグラム
### フローチャート
```mermaid
graph TD
A[開始] --> B{条件分岐}
B -->|Yes| C[処理 A]
B -->|No| D[処理 B]
C --> E[結合]
D --> E
E --> F[終了]
```
### シーケンス図
```mermaid
sequenceDiagram
participant C as Client
participant S as Server
participant DB as Database
C->>S: POST /api/login
S->>DB: SELECT user
DB-->>S: User data
alt 認証成功
S-->>C: 200 OK + JWT
else 認証失敗
S-->>C: 401 Unauthorized
end
```
### ER図
```mermaid
erDiagram
USER ||--o{ ORDER : places
USER {
int id PK
string name
string email
}
ORDER ||--|{ ORDER_ITEM : contains
ORDER {
int id PK
int user_id FK
date created_at
}
ORDER_ITEM }o--|| PRODUCT : references
ORDER_ITEM {
int id PK
int order_id FK
int product_id FK
int quantity
}
PRODUCT {
int id PK
string name
decimal price
}
```
### ガントチャート
```mermaid
gantt
title プロジェクトスケジュール
dateFormat YYYY-MM-DD
section 設計
要件定義 :done, des1, 2025-01-01, 14d
基本設計 :done, des2, after des1, 10d
詳細設計 :active, des3, after des2, 10d
section 開発
バックエンド : dev1, after des3, 20d
フロントエンド : dev2, after des3, 25d
section テスト
単体テスト : test1, after dev1, 10d
結合テスト : test2, after dev2, 10d
```
### 状態遷移図
```mermaid
stateDiagram-v2
[*] --> Draft
Draft --> Review : submit
Review --> Draft : reject
Review --> Approved : approve
Approved --> Published : publish
Published --> Archived : archive
Archived --> [*]
```
---
## その他の要素
### 絵文字（GitHub 対応）
:rocket: :star: :bug: :white_check_mark: :warning: :memo: :fire:
### オートリンク
URL を直接書くと自動リンクになる（GFM）: https://github.com
メールアドレスも: user@example.com
### 略語（一部の処理系で対応）
*[HTML]: HyperText Markup Language
*[GFM]: GitHub Flavored Markdown
*[API]: Application Programming Interface
HTML と GFM と API という略語にカーソルを合わせると展開される（対応環境のみ）。
### バッジ
### YouTube 埋め込み（画像リンクで代替）
[](https://www.youtube.com/)
### ASCII アート
```
┌─────────────────────────────────────┐
│ Architecture │
├──────────┬──────────┬───────────────┤
│ Client │ Server │ Database │
│ (React) │ (Node.js)│ (PostgreSQL) │
├──────────┼──────────┼───────────────┤
│ - SPA │ - REST │ - Tables │
│ - SSR │ - WS │ - Views │
│ - PWA │ - gRPC │ - Functions │
└──────────┴──────────┴───────────────┘
```
---
## おわりに
このドキュメントは **Markdown の主要な構文要素** をほぼ網羅してる。
実際に使えるかどうかは処理系（GitHub, GitLab, VS Code, Obsidian, etc.）に依存するから、
使う環境に合わせて確認してな。
> 参考: [GitHub Flavored Markdown Spec](https://github.github.com/gfm/)
> | [CommonMark Spec](https://spec.commonmark.org/)
> | [Mermaid Documentation](https://mermaid.js.org/)