Markdown リストジェネレーター
リストの種類を選んで項目を入力するだけで、箇条書き・番号付き・ネストのMarkdownをそのままコピーできます。処理はすべてブラウザ内で完結します。
Markdownでリストを作るには?
箇条書きは各行を `-`、`*`、`+` のいずれかで始め、番号付きリストは `1.` で始めます。記号のあとには必ず半角スペースを1つ入れてください。子項目は半角2つ分インデントすると入れ子になります。リストの前に空行を1行置けば、直前の段落に飲み込まれません。
- 箇条書きの項目
- 2つ目の項目
- 入れ子の項目
1. 番号付きの項目
2. 2つ目の項目前半は入れ子の子項目を1つ含む箇条書きの<ul>として、後半は1から始まる番号付きの<ol>として表示されます。
Markdown リストジェネレーターを使う
リストの項目
設定
出力
Markdownのリスト記法
Markdownのリストは箇条書きと番号付きの2種類だけですが、つまずく箇所はほぼ3つに集約されます。記号のあとの半角スペース、リストの前の空行、そして子項目のインデント幅です。
箇条書き(順序なしリスト)
行頭にハイフン・アスタリスク・プラスのいずれかを置き、続けて半角スペースを入れます。3種類とも同じ記号として表示されるため、どれか1つに決めて最後まで揃えてください。途中で記号を変えると、そこから別のリストが静かに始まってしまいます。
- CLIをインストールする
- マイグレーションを実行する
- アプリをデプロイする
* アスタリスクも使えます
+ プラスも使えます最初の3行が1つの箇条書きになります。後半の2行は記号が違うため、前のリストには続かず、それぞれ別のリストとして表示されます。
番号付きリスト(順序ありリスト)
数字のあとにピリオドか閉じ括弧を置き、続けて半角スペースを入れます。読み取られるのは最初の数字だけで、以降は自動的に連番へ振り直されます。ドキュメントで全行を 1. と書く書き方が広まっているのはこのためです。
1. リポジトリをクローンする
1. 依存パッケージをインストールする
1. テストを実行する
5. 5から始まります
6. 次は6です前半は全行が 1. でも 1、2、3 と表示されます。後半は先頭が 5 のため、5から番号が始まります。
入れ子(ネスト)とインデント
子項目は親より深くインデントし、同じ階層の項目はすべて同じ幅に揃えます。箇条書きの下なら半角2つで十分です。番号付きの下では半角3つにすると、子項目が親の本文とちょうど揃います。1つのリストの中でタブと半角スペースを混ぜてはいけません。
- フロントエンド
- コンポーネント
- ボタン
- バックエンド
1. フロントエンド
1. コンポーネント
1. ボタン
2. バックエンド3階層の箇条書きと、3階層の番号付きリストになります。番号は階層ごとに1から数え直されます。
箇条書きと番号付きを混ぜる
入れ子は同じ種類のリスト同士に限りません。箇条書きの項目の中に番号付きの子リストを置くことも、その逆もできます。アウトラインやリリース手順はたいていこの形で書かれます。
- リリース前チェック
1. バージョンを上げる
2. コミットにタグを打つ
3. パッケージを公開する
- リリース後
- アナウンスする
- エラー率を監視する外側は箇条書きで、1つ目の項目に番号付きの子リスト、2つ目の項目に箇条書きの子リストが入ります。
リスト項目の中の段落とコードブロック
追加の内容は、その項目の本文の位置までインデントし、前に空行を1行入れて初めてその項目の一部として扱われます。インデントが足りないとそこでリストが終わってしまい、次の項目から番号が振り直されます。
1. パッケージをインストールする
```bash
npm install mdutil
```
2. 読み込めば準備完了です。2手順の番号付きリストになり、手順1の中にフェンスコードブロックが収まります。リストが途中で分断されることはありません。
タスクリスト(チェックボックス)
GitHub Flavored Markdownの拡張です。記号、半角スペース、[ ] または [x]、さらに半角スペースと続けるとチェックボックスになります。Issueテンプレートやプルリクエストの説明、日々のメモに便利です。
- [x] 仕様を書く
- [ ] チームでレビューする
- [ ] リリースする3つのチェックボックス項目になり、最初の1つがチェック済みで表示されます。拡張に対応していない環境では角括弧がそのまま文字として表示されます。
各サービスでの対応状況
基本的な箇条書きと番号付きはどこでも使えますが、ネストの深さ、タスクリスト、空行のルールはサービスごとに差があります。階層の深いアウトラインを公開する前に、掲載先の仕様を確認しておくと安心です。
| プラットフォーム | 対応状況 | 備考 |
|---|---|---|
| GitHub / GitLab | 対応 | 3種類の記号、無制限のネスト、- [ ] のタスクリストがすべて使えます。インデントは半角2つで十分です。 |
| Discord | 一部 | 箇条書きと 1. の番号は表示されますが、ネストの階層に上限があり、タスクリストは使えません。 |
| Slack | 一部 | 入力欄に独自のリストボタンがあり、貼り付けたMarkdownのリスト記法は変換されません。 |
| Obsidian | 対応 | すべてのリストとタスクリストに対応し、Enterを押すと次の項目が自動で続きます。 |
| Notion | 対応 | 「- 」や「1. 」と入力するとネイティブのリストブロックになり、TabとShift+Tabで階層を変えられます。 |
| Qiita / Zenn | 対応 | 箇条書き・番号付き・タスクリストが使えます。リストの前に空行がないと前の段落に続いてしまいます。 |
Markdownでリストを作る手順
リストの種類を選ぶ
項目の順序に意味があるなら番号付きリスト、単に並べるだけなら箇条書きを選びます。
記号のスタイルを選ぶ
箇条書きならハイフン・アスタリスク・プラス、番号付きなら数字・アルファベット・ローマ数字をピリオドか閉じ括弧と組み合わせて選びます。
項目を入力する
各項目の入力欄に内容を書き、追加ボタンで項目を増やし、不要な項目は削除します。
インデントを設定する
ネストの階層スライダーでリスト全体をインデントできます。半角2つ以外の幅を求める環境向けには、インデント幅の指定をオンにしてください。
結果をコピーする
生成されたMarkdownをコピーします。<ul>や<ol>のタグが必要な場合はHTMLタブに切り替え、公開前にプレビューで確認してください。
よくある質問
Markdownの箇条書きと番号付きリストの違いは?
箇条書きはハイフン・アスタリスク・プラスのいずれかを記号として使い、<ul>にコンパイルされます。番号付きリストは数字にピリオドか閉じ括弧を添えて書き、<ol>にコンパイルされます。インストール手順のように順序に意味がある場合は番号付き、意味がない場合は箇条書きを使います。
Markdownでリストを入れ子にするには?
子項目を親項目より深くインデントし、同じ階層の項目はすべて同じ幅に揃えます。箇条書きの下なら半角2つで十分で、番号付きの下では半角3つにすると子項目が親の本文と揃います。階層は何段でも重ねられ、箇条書きと番号付きを混ぜることもできます。
Markdownのリストはスペース何個でインデントする?
箇条書きは1階層につき半角2つがもっとも安全で、GitHub、Obsidian、Notion、Qiitaのいずれでも通ります。番号付きの下では半角3つにすると記号のあとの本文と揃います。ハイフンの下なら半角4つでも動きますが、同じリストの中でタブと半角スペースを混ぜることだけは避けてください。
Markdownのリストが反映されないのはなぜですか?
よくある原因は4つです。リストと直前の段落の間に空行がなく最初の項目が段落に飲み込まれている、記号のあとの半角スペースが抜けている(-項目 はただの文字列で、- 項目 がリストです)、入れ子の項目のインデント幅が揃っていない、そして途中で記号を変えたために2つ目のリストが静かに始まっている、の4つです。
番号付きリストの数字は連番で書く必要がありますか?
必要ありません。Markdownは開始番号を決めるために最初の数字だけを読み、以降は自動的に連番へ振り直します。全行に 1. と書いても 1、2、3 と表示されるため、途中に手順を差し込んでも以降の行すべてが差分に出ることがなく、レビューが楽になります。
番号付きリストを1以外の数字から始めるには?
最初の項目をその数字にします。5. で始まるリストは 5、6、7 と表示されます。CommonMarkもGitHub Flavored Markdownも開始番号を尊重しますが、一部の古いレンダラーはこれを無視して常に1から始めます。
Markdownの番号付きリストでアルファベットやローマ数字は使えますか?
標準のMarkdownでは使えません。a. や i. のような記号はCommonMarkでは単なる文字として扱われ、出力は通常の番号付きリストのままです。どうしてもアルファベットやローマ数字が必要な場合は、CSSのlist-style-typeプロパティを使うか、type属性を付けたHTMLの<ol>要素を直接書いてください。
リスト項目の中に段落やコードブロックを入れるには?
空行を1行入れてから、その項目の本文の位置まで内容をインデントします。ハイフンの箇条書きなら半角2つ、番号付きなら半角3つです。段落、フェンスコードブロック、画像、表はいずれもこの方法で項目の中に収まります。インデントが足りないとそこでリストが終わります。
Markdownでチェックボックスやタスクリストを作るには?
記号のあとに半角スペース、続けて未完了なら [ ]、完了済みなら [x] と書き、さらに半角スペースを置いてから項目の本文を書きます。これはGitHub Flavored Markdownの拡張で、GitHub、GitLab、Obsidian、VS Codeではクリックできるチェックボックスとして表示され、CommonMarkだけのレンダラーでは角括弧がそのまま表示されます。
Markdownは定義リストに対応していますか?
標準のMarkdownにもGitHub Flavored Markdownにも定義リストはありません。定義リストはPHP Markdown Extra、MultiMarkdown、Pandocなどの拡張が備える記法で、用語を1行目に書き、次の行をコロンと半角スペースで始めて説明を書きます。対応していない環境では、HTMLの<dl>、<dt>、<dd>タグを直接書いてください。