Markdown マークダウン記法 | 基礎編チートシート

Markdownの基本記法をシンプルにまとめた日本語ガイドです。最初に覚えるべき基礎をわかりやすく解説します。

📚 応用編はこちら - 表、HTML併用、アクセシビリティなど

基本の書き方とルール

🔑 重要な基本ルール

1. 空行は必須: 段落、見出し、リスト間は空行で区切る

2. 半角スペース: 見出し # やリスト記号の直後には必ず半角スペースを入れる

3. 見出し階層: #（H1）は記事タイトル級。本文中は ## から始める

4. 1行=1文（推奨）: バージョン管理しやすくするため

5. 文字エンコーディング: UTF-8を使用（日本語対応）

✅ 良い例・❌ 悪い例

✅ 良い例:
# メインタイトル

## セクション見出し

これは段落です。

- リスト項目1
- リスト項目2

❌ 悪い例:
#メインタイトル(スペースなし)
##セクション見出し
これは段落です。(空行なし)
-リスト項目1(スペースなし)

見出し

# タイトル（H1）
## 見出し（H2）
### 小見出し（H3）
#### 見出し4（H4）
##### 見出し5（H5）
###### 見出し6（H6）

📝 実務での注意点

• H1は1記事に1つ: SEO的にも推奨

• 階層スキップは避ける: H2の次にいきなりH4は使わない

• 見出し内でMarkdown記法は使わない: # **太字見出し** は避ける

• 英数字との境界: 日本語と英数字の間に半角スペースを入れると読みやすい

# Web API の設計ガイド（推奨）
# WebAPIの設計ガイド（非推奨）

段落と改行

基本ルール

• 段落: 空行で区切る

• 行内改行: 行末に半角スペース2つ + 改行

• 強制改行: <br> タグを使用

これは第1段落です。
これも同じ段落内の文章として扱われます。

これは第2段落です。

行内で改行したい場合は
このように行末にスペース2つ。

HTMLタグでも<br>改行できます。

⚠️ よくある問題

❌ 問題: 末尾スペースがエディタで削除される
対策: <br> タグを使用

❌ 問題: 改行が意図通りにならない
対策: プレビューで確認しながら作業

強調（太字・斜体）

*斜体* または _斜体_
**太字** または __太字__
***太字+斜体*** または ___太字+斜体___
~~取り消し線~~

実用例

**重要**: この設定は必須です。
*注意*: バックアップを取ってから実行してください。
~~旧バージョン~~ → 新バージョン

💡 ポイント: 日本語では斜体より太字の方が見やすい

リスト（箇条書き・番号付き）

箇条書きリスト

- 項目1
- 項目2
  - ネストした項目（2〜4スペースでインデント）
  - ネストした項目

番号付きリスト

1. 第一項目
1. 第二項目（全て1.でOK）
1. 第三項目

混在リスト

1. まず最初に
   - 準備するもの
   - 注意事項
2. 次に実行
   - 手順A
   - 手順B

💡 ポイント: リストの前後には必ず空行を入れる

コード

インラインコード

コマンドは `npm install` を実行してください。
変数 `userName` に値を設定します。

コードブロック

```js
// JavaScript例
function greet(name) {
  console.log(`Hello, ${name}!`);
}
```

```python
# Python例
def greet(name):
    print(f"Hello, {name}!")
```

よく使う言語指定

• JavaScript: js
• Python: py
• HTML: html
• CSS: css
• Shell: bash
• JSON: json

💡 ポイント: 言語を指定するとシンタックスハイライトが有効になります

リンク

基本形

[リンクテキスト](https://example.com)
[タイトル付きリンク](https://example.com "リンクの説明")
<https://example.com> <!-- URLそのままリンク -->

内部リンク（見出しへのジャンプ）

[目次に戻る](#目次)
[見出しへのリンク](#見出しの例)

実用例

- [公式ドキュメント](https://docs.example.com)
- [お問い合わせ](mailto:contact@example.com)
- [PDFファイル](./documents/manual.pdf)

画像

基本形

![代替テキスト](https://example.com/image.jpg)
![代替テキスト](./local-image.png)

実用例

![管理画面のスクリーンショット](./screenshots/admin-panel.png)
![システム構成図](./diagrams/architecture.svg)

💡 ポイント: 代替テキストは必ず記入しましょう（アクセシビリティのため）

区切り線

---

💡 ポイント: 区切り線の前後には空行が必要です

エスケープ（記号の無効化）

Markdown記号を文字として表示したい場合は、バックスラッシュ \ を前に付けます。

\* アスタリスク → *
\# ハッシュ → #
\[ \] 角括弧 → [ ]

次のステップ

基礎をマスターしたら、応用編で更に便利な機能を学びましょう。

📚 応用編はこちら

応用編の内容:

• 引用・タスクリスト
• 表（テーブル）
• 文字色の変更
• HTML併用テクニック
• アクセシビリティとSEO対応
• 参考リンク集

参考リンク

• CommonMark Spec - Markdown標準仕様
• GitHub Flavored Markdown - GitHub拡張仕様
• Markdown Guide - 包括的ガイド

最終更新: 2025年10月1日