マークダウン変換ツール

📝 編集

# マークダウン完全ガイド

このテンプレートには、マークダウンのすべての記法が含まれています。

---

## 📝 見出し

# H1 見出し（最大）
## H2 見出し
### H3 見出し
#### H4 見出し
##### H5 見出し
###### H6 見出し（最小）

---

## 🎨 テキスト装飾

### 基本的な装飾
- **太字（Bold）**: `**太字**` または `__太字__`
- *斜体（Italic）*: `*斜体*` または `_斜体_`
- ***太字斜体***: `***太字斜体***`
- ~~取り消し線~~: `~~取り消し線~~`
- ==ハイライト==: `==ハイライト==` (一部対応)

### 上付き・下付き文字
- H~2~O（下付き文字）: `H~2~O`
- E=mc^2^（上付き文字）: `E=mc^2^`

### HTMLタグも使用可能
<mark>マーカーで強調</mark>
<u>下線</u>
<kbd>Ctrl</kbd> + <kbd>C</kbd>

---

## 📋 リスト

### 番号なしリスト（箇条書き）
- 項目1
- 項目2
  - ネストした項目2-1
  - ネストした項目2-2
    - さらにネスト2-2-1
- 項目3

記号は `*`, `+`, `-` のいずれでもOK
* アスタリスク
+ プラス
- マイナス

### 番号付きリスト
1. 最初の項目
2. 2番目の項目
3. 3番目の項目
   1. サブ項目3-1
   2. サブ項目3-2
4. 4番目の項目

### タスクリスト（チェックボックス）
- [x] 完了したタスク
- [ ] 未完了のタスク
- [ ] コードを書く
- [x] テストする
- [ ] デプロイする

### 定義リスト
マークダウン
: テキストをHTMLに変換するための軽量マークアップ言語

GitHub
: ソフトウェア開発プラットフォーム
: バージョン管理システムGitをベースとする

---

## 🔗 リンク

### 基本的なリンク
[Google](https://www.google.com)
[リンクにタイトル付き](https://www.google.com "Google検索")

### URL直接表示
<https://www.example.com>
<email@example.com>

### 参照リンク
[参照スタイルのリンク][1]
[大文字小文字は区別されません][LINK]

[1]: https://www.example.com
[link]: https://www.example.com/reference

### ページ内リンク
[見出しへジャンプ](#テキスト装飾)

---

## 🖼️ 画像

### 画像記法の例

**基本的な画像**:
```markdown
![代替テキスト](画像のURL "画像のタイトル")
```

**参照スタイルの画像**:
```markdown
![代替テキスト][image-ref]

[image-ref]: 画像のURL
```

**リンク付き画像**:
```markdown
[![画像リンク](画像のURL)](リンク先URL)
```

**HTMLで画像サイズ指定**:
```markdown
<img src="画像のURL" width="100" alt="サイズ指定">
```

> 注: PDF/Word変換では、外部画像URLは読み込まれません。ローカル画像を使用してください。

---

## 💬 引用

### 基本的な引用
> これは引用文です。
> 複数行にわたって書くこともできます。

### ネストした引用
> レベル1の引用
>> レベル2の引用
>>> レベル3の引用

### 引用内に他の要素
> ## 引用内の見出し
>
> - リスト項目1
> - リスト項目2
>
> **太字**や*斜体*も使えます。

---

## 💻 コード

### インラインコード
`const x = 10;` のようにバッククォートで囲む

### コードブロック（3つのバッククォート）

```javascript
// JavaScriptの例
function greet(name) {
  console.log(`Hello, ${name}!`);
}
greet("World");
```

```python
# Pythonの例
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

print(fibonacci(10))
```

```html

<!DOCTYPE html>
<html>
<head>
  <title>タイトル</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>
```

```css
/* CSSの例 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to right, #667eea, #764ba2);
}
```

```json
{
  "name": "example",
  "version": "1.0.0",
  "description": "JSONの例"
}
```

### インデント（4スペース）によるコードブロック

function oldStyle() {
      return "4スペースでインデント";
    }

---

## 📊 テーブル

### 基本的なテーブル
| ヘッダー1 | ヘッダー2 | ヘッダー3 |
|----------|----------|----------|
| セル1-1  | セル1-2  | セル1-3  |
| セル2-1  | セル2-2  | セル2-3  |
| セル3-1  | セル3-2  | セル3-3  |

### 配置指定（左・中央・右）
| 左揃え | 中央揃え | 右揃え |
|:-------|:--------:|-------:|
| Left   | Center   | Right  |
| 左     | 中央     | 右     |
| A      | B        | C      |

### 複雑なテーブル
| 機能 | Chrome | Firefox | Safari | Edge |
|:-----|:------:|:-------:|:------:|:----:|
| 基本機能 | ✅ | ✅ | ✅ | ✅ |
| 拡張機能 | ✅ | ✅ | ⚠️ | ✅ |
| CSS Grid | ✅ | ✅ | ✅ | ✅ |

---

## ➗ 数式（LaTeX記法）

### インライン数式
Einstein の公式: $E = mc^2$

ピタゴラスの定理: $a^2 + b^2 = c^2$

### ブロック数式

$$
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$$

$$
f(x) = \sum_{n=0}^{\infty} \frac{f^{(n)}(a)}{n!}(x-a)^n
$$

---

## 📝 脚注

これは脚注の例です[^1]。別の脚注もあります[^note]。

複数行の脚注も書けます[^longnote]。

[^1]: 1つ目の脚注の内容です。

[^note]: 名前付きの脚注。識別子は何でもOK。

[^longnote]: 複数行の脚注の例。

インデントすることで、複数の段落を
    脚注に含めることができます。

> 引用も含められます。

---

## 🔀 水平線

3つ以上のハイフン、アスタリスク、アンダースコア

---

***

___

---

## 📦 折りたたみ（詳細）

<details>
<summary>クリックして展開</summary>

### 隠れたコンテンツ

ここに詳細な情報を書けます。

- リストも使えます
- **太字**や*斜体*も
- コードブロックも可能

```javascript
console.log("折りたたみの中のコード");
```

</details>

<details>
<summary><strong>もう一つの例</strong></summary>

| 項目 | 値 |
|------|-----|
| A    | 100 |
| B    | 200 |

</details>

---

## 😀 絵文字

### GitHub式の絵文字

:smile: :heart: :+1: :rocket: :star: :fire:
:tada: :sparkles: :eyes: :thinking_face:
:wave: :clap: :muscle: :pray:

### Unicode絵文字

😀 😃 😄 😁 😊 🥰 😍 🤗 🤔 😎
❤️ 💙 💚 💛 🧡 💜 🖤 🤍 🤎
✅ ❌ ⚠️ 📝 📊 📈 📉 💡 🔥 ⭐

---

## 🎯 エスケープ

バックスラッシュでマークダウン記号をエスケープ：

\* アスタリスク
\_ アンダースコア
\# ハッシュ
\[ 角括弧
\] 角括弧閉じ
$ 丸括弧
$ 丸括弧閉じ

---

## 🔤 特殊文字

### HTMLエンティティ

### 特殊記号

← → ↑ ↓ ↔ ⇒ ⇐ ⇔
✓ ✗ ✔ ✘
§ ¶ † ‡ • ◦ ‣
° ′ ″ ‰ ℃ ℉

---

## 🎨 HTMLタグ

マークダウン内でHTMLタグも使用できます：

<div style="background: #f0f0f0; padding: 20px; border-radius: 8px;">
  <h3 style="color: #667eea;">HTMLスタイル</h3>
  <p>背景色やパディングを指定できます。</p>
</div>

<br>

<table border="1" cellpadding="10">
  <tr>
    <td>HTMLテーブル</td>
    <td>も使えます</td>
  </tr>
</table>

---

## 🔗 改行

### 行末に2つのスペース
これは1行目です
これは2行目です（行末に2スペース）

### HTMLのbrタグ
これは1行目です<br>
これは2行目です（brタグ使用）

---

## ✨ その他の便利な記法

### 略語
*[HTML]: Hyper Text Markup Language
*[CSS]: Cascading Style Sheets

HTML と CSS は Web開発の基本です。

### コメント（非表示）

### キーボード入力表示
ファイルを保存: <kbd>Ctrl</kbd> + <kbd>S</kbd>
コピー: <kbd>Ctrl</kbd> + <kbd>C</kbd>
ペースト: <kbd>Ctrl</kbd> + <kbd>V</kbd>

---

## 📚 このテンプレートの使い方

1. **必要な部分をコピー**して使用
2. **プレビュー**で確認しながら編集
3. **書式設定**でスタイルをカスタマイズ
4. **変換ボタン**でエクスポート

右側のプレビューでリアルタイム確認できます！

---

**作成日**: 2025年
**バージョン**: 完全版テンプレート v1.0

📝 編集

👁️ プレビュー