markdown writing cheat-sheet gfm commonmark dev-reference

究極の Markdown チートシート:構文、プレビュー、ベストプラクティス

開発者とライターのための包括的な Markdown チートシート。ヘッダー、リスト、テーブル、GFM 拡張機能を明確な例と FAQ でマスターしましょう。

2026-04-12

究極の Markdown チートシート:構文、プレビュー、ベストプラクティス

Markdown は、プレーンテキスト形式の構文を持つ軽量マークアップ言語です。README ファイル、ドキュメント、ブログ記事などで広く使用されています。読みやすく書きやすいため、Markdown は開発者間のコミュニケーションにおける標準となっています。

標準的な Markdown および GitHub Flavored Markdown (GFM) 構文のクイックリファレンスとして、このチートシートを活用してください。


1. テキストの書式設定

テキストの基本的なスタイリングです。

要素 構文 結果
見出し # H1 から ###### H6 H1 から H6
太字 **text** または __text__ text
斜体 *text* または _text_ text
打ち消し線 ~~text~~ text
引用 > quote > quote
水平線 --- または ***

2. リスト

順序付きリスト、順序なしリスト、タスクリストでコンテンツを整理します。

  • 順序なしリスト: *-、または + を使用します。
    - アイテム 1
    - アイテム 2
      - サブアイテム
    
  • 順序付きリスト: 数字の後にピリオドを使用します。
    1. 最初のアイテム
    2. 次のアイテム
    
  • タスクリスト (GFM):
    - [x] 完了したタスク
    - [ ] 未完了のタスク
    

3. リンクと画像

  • リンク: [テキスト](URL) -> Google
  • 画像: ![代替テキスト](URL)
  • タイトル付きリンク: [テキスト](URL "タイトル")

4. コードブロック

  • インラインコード: シングルバッククォートを使用します: `code`.
  • コードブロック: トリプルバッククォートを使用し、オプションで言語のハイライトを指定します:
    ```javascript
    console.log("Hello, World!");
    
    
    

5. テーブルと高度な構文

テーブル:

| ヘッダー 1 | ヘッダー 2 |
| :--- | :--- |
| セル 1 | セル 2 |
| セル 3 | セル 4 |

脚注:

ここに脚注の参照[^1]があります。
[^1]: これが脚注の内容です。

6. Markdown の種類(フレーバー)

  • CommonMark: 標準的で互換性の高い Markdown バージョン。
  • GitHub Flavored Markdown (GFM): テーブル、タスクリスト、打ち消し線、自動リンクのサポートを追加。ほとんどの現代的なレンダラーが GFM をサポートしています。
  • Markdown 内の HTML: より複雑なレイアウトのために、Markdown 内で生の HTML タグ(<u><div> など)を使用できます。ただし、セキュリティのために一部のレンダラーでは削除される場合があります。

よくある質問 (FAQ)

Q: Markdown をプレビューするにはどうすればよいですか?

A: VS Code などのほとんどのコードエディタには、組み込みの Markdown プレビュー (Ctrl+Shift+V) があります。また、オンラインの Markdown レンダラーや専用のエディタを使用して、HTML に変換された後のドキュメントの見た目を確認することもできます。

Q: Markdown エディタとレンダラーの違いは何ですか?

A: エディタは、プレーンテキストの構文を書き込む場所です。レンダラー(またはパーサー)は、その構文をブラウザで表示するための HTML に変換するエンジンです。

Q: Markdown を書く際のベストプラクティスは何ですか?

A:

  1. 一貫性: リスト (- vs *) や見出しには、1 つのスタイルを使い続けてください。
  2. 可読性: 段落やリスト項目の間には空行を入れてください。
  3. 代替テキスト: アクセシビリティのために、画像には常に意味のある代替テキストを提供してください。
  4. コードフェンシング: 構文ハイライトを有効にするために、コードブロックには常に言語を指定してください。

Tool3M の関連ツール

  • Markdown to HTML: Markdown をクリーンで本番環境対応の HTML に即座に変換し、プレビューします。
  • SQL Formatter: Markdown ドキュメントに貼り付けるための SQL コードブロックを整形します。