Text Tools

ライターと開発者のためのMarkdownガイド

Markdownの基本から応用まで完全マスター — テーブル、コードブロック、タスクリスト、そして各Markdownフレーバーの違いを解説。

6分で読めます

コーヒーショップでノートパソコンに向かって書いている人

Markdownは、インターネット上でユニバーサルな文書フォーマットに最も近い存在です。GitHub README、Notionドキュメント、Slackメッセージ、ドキュメントサイト、ブログ記事、開発者ノートなど、あらゆる場面で使われています。一度覚えれば、キャリアを通じてどこでも活用できます。

Markdownとは?

Markdownは、2004年にJohn Gruberによって作られた軽量マークアップ言語です。基本的な考え方はシンプル:プレーンテキストにシンプルな記号を使って書くだけで、美しくフォーマットされたHTMLとしてレンダリングされます。

This **bold text** and *italic text* render instantly.

レンダリング結果:This bold text and italic text render instantly.

生のテキストはレンダリング前でも十分に読みやすい状態です。

基本構文

見出し

# Heading 1
## Heading 2
### Heading 3
#### Heading 4

見出しを使ってドキュメントの階層構造を作ります。# H1 は通常ページタイトルとして使い、1つのドキュメントに1つだけ使用します。

強調

**bold text**
*italic text*
***bold and italic***
~~strikethrough~~

リスト

Unordered list:
- Item one
- Item two
  - Nested item (indent with 2 spaces)
  - Another nested item
- Item three

Ordered list:
1. First step
2. Second step
3. Third step

リンクと画像

[Link text](https://example.com)
[Link with title](https://example.com "Hover tooltip")

![Alt text for image](https://example.com/image.jpg)
![Alt text](./local-image.png "Optional title")

引用ブロック

> This is a blockquote.
> It can span multiple lines.

> You can nest blockquotes:
> > Like this.

水平線

---

(3つ以上のダッシュ、アスタリスク、またはアンダースコアを単独の行に記述)

コードブロック

インラインコードはシングルバッククォートを使います:

Use the `console.log()` function for debugging.

フェンスコードブロックはトリプルバッククォートを使い、オプションで言語識別子を指定するとシンタックスハイライトが適用されます:

```javascript
function greet(name) {
  return `Hello, ${name}!`;
}
```

対応言語には javascripttypescriptpythonbashsqljsonyamlcsshtmlgorust など多数があり、レンダラーによって異なります。

テーブル

Markdownのテーブルはパイプ文字とダッシュを使います:

| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Cell A   | Cell B   | Cell C   |
| Cell D   | Cell E   | Cell F   |

区切り行にコロンを使ってカラムの配置を指定できます:

| Left | Center | Right |
|:-----|:------:|------:|
| L    |   C    |     R |

テーブルはGitHub Flavored Markdown(GFM)の機能であり、標準Markdownには含まれません。GitHub、VS Code、ほとんどのドキュメントプラットフォーム、MDXで使用できます。

タスクリスト(GFM)

- [x] Write the introduction
- [x] Add code examples
- [ ] Review and publish
- [ ] Add images

GitHub上ではインタラクティブなチェックボックスとしてレンダリングされます。モダンなMarkdownレンダラーで広くサポートされています。

Markdownフレーバー

オリジナルのMarkdownは意図的にシンプルに設計されています。そのため、さまざまな拡張が生まれています:

フレーバー 使用場所 主な追加機能
CommonMark 多くのプラットフォーム 標準化された仕様
GitHub Flavored (GFM) GitHub、GitLab テーブル、タスクリスト、打ち消し線、自動リンク
MDX Reactサイト Markdown内でJSXコンポーネントが使用可能
Pandoc Markdown 学術文書 脚注、引用、数式
MultiMarkdown macOSツール テーブル、メタデータ、脚注

迷ったときはGFMを使いましょう — 最も広くサポートされている拡張フレーバーです。

フロントマター

多くのMarkdownプロセッサーは、ファイルの先頭にYAMLフロントマターを記述してメタデータを管理する機能をサポートしています:

---
title: "My Article Title"
date: "2026-03-24"
author: "Jane Doe"
tags: ["markdown", "writing", "tools"]
published: true
---

# Article content starts here

フロントマターはドキュメント本文とは別に解析され、ページタイトル、日付、SEOメタデータなどに使用されます。

MDX:Markdown + JSX

MDXはReactコンポーネントを含むことができるMarkdownです。Reactベースのサイト(Next.js、Gatsby、Astro)のドキュメントやブログ記事に最適です:

import { Alert } from '../components/Alert'

## Important note

<Alert type="warning">
  This feature is deprecated in v3.
</Alert>

Regular **Markdown** content continues below.

これにより、Markdownのシンプルさとインタラクティブなコンポーネントの強力な機能を組み合わせることができます。

特殊文字のエスケープ

Markdownの特殊文字の前にバックスラッシュを付けることで、そのまま表示できます:

\*not italic\*
\# not a heading
\[not a link\]

より良いMarkdownドキュメントのためのヒント

  1. 1文1行 — Gitでの差分が見やすくなります。Markdownは単一の改行を無視するため、レンダリング結果は変わりません。
  2. ブロック間に空行を入れる — 段落、見出し、リスト、コードブロックの間には必ず空行を入れましょう。
  3. リストマーカーを統一する — 箇条書きリストには - または * のどちらかを選び、プロジェクト全体で統一しましょう。
  4. 繰り返し使うURLはリファレンスリンクにする — 一度定義して何度でも使い回せます:
    See the [documentation][docs] and [changelog][docs].
    [docs]: https://example.com/docs
    
  5. すべての画像にalt属性を設定する — アクセシビリティとSEOに不可欠です。

読みやすさのチェック

Markdownを使えば書くのは簡単になりますが、書きやすいからといって読みやすい文章になるとは限りません。Readability Scoreツールを使って、Flesch-Kincaidの学年レベル、文の複雑さ、受動態の使用頻度を確認しましょう。一般的な読者を対象とする場合は、Grade 8〜10レベルのわかりやすく簡潔な表現を心がけましょう。

Markdownは10分で習得できて、生涯にわたって恩恵をもたらすツールの一つです。今日から書き始めましょう — 将来の共同作業者も、そして将来の自分自身も、きっと感謝するはずです。