Markdown チェックボックスジェネレーター
項目のテキスト、チェック状態、件数、インデントを指定するだけで、GitHubでそのまま表示できるタスクリストをコピーできます。処理はすべてブラウザ内で完結します。
Markdownでチェックボックスを作るには？
リスト項目として `- [ ] タスク` と書くとチェックなし、`- [x] タスク` と書くとチェック済みのチェックボックスになります。空の角かっこの中の半角スペースは省略できません。これはGitHub Flavored Markdownの拡張記法で、GitHub・GitLab・Obsidian・Notionで使えます。
- [ ] 未完了のタスク
- [x] 完了したタスク各項目にチェックボックスが付いた箇条書きになります。1行目は空のボックス、2行目はチェック済みです。GitHubとGitLabではボックスをクリックでき、切り替えると元のMarkdownが書き換わります。
Markdown チェックボックスジェネレーターを使う
チェックボックスの設定
出力
Markdownのチェックボックス記法
チェックボックスは独立した要素ではなく、状態を表す印が付いたリスト項目です。リスト記号・角かっこ・スペースの3つが正しく揃って初めて表示されます。どれか1つでも欠けると、角かっこがそのまま文字として出てしまいます。
チェックあり・なしの基本形
リスト記号はハイフン・アスタリスク・プラスのいずれでも構いません。角かっこの中は半角スペース1つでチェックなし、小文字のxでチェック済みです。GitHub Flavored Markdownは大文字のXも受け付けます。
- [ ] マイグレーションスクリプトを書く
- [x] スキーマ変更をレビューする
* [ ] アスタリスクもリスト記号として使えます
+ [x] プラス記号も同様です1つのリストの中に4つのチェックボックス項目が並びます。1番目と3番目はチェックなし、2番目と4番目はチェック済みです。
サブタスクの入れ子
子項目を半角スペース2つ分インデントすると、親項目の下に入れ子になります。GitHubは親項目の本文が始まる位置を基準に階層を数えるため、インデント幅は必ず揃えてください。タブと半角スペースの混在は、入れ子が気づかないうちに解除される最大の原因です。
- [ ] v2をリリースする
- [x] APIの仕様を凍結する
- [ ] CHANGELOGを更新する
- [ ] 移行手順を追記する
- [x] リリースブランチを切る2階層のリストになります。親タスクは行頭から始まり、サブタスクは1段、移行手順はさらにもう1段インデントされます。
タスク項目の中で装飾を使う
閉じかっこより後ろは通常のMarkdownとして解釈されるため、太字・リンク・インラインコード・打ち消し線がそのまま使えます。完了した項目に打ち消し線を引いて視覚的に後退させるのは、よく使われる書き方です。
- [x] ~~旧 `users` テーブルを移行する~~
- [ ] **ブロック中：**[チケット #482](https://example.com/482) 待ち
- [ ] `getUserByID` を `getUserById` にリネームする1行目はチェック済みで文字に打ち消し線が入ります。2行目は太字のラベルとリンクが表示され、3行目は2か所がインラインコードになります。
チェックボックスが壊れる書き方
タスクリストが表示されない原因は、ほとんどが次の3つです。いずれもチェックボックスにはならず、角かっこがそのまま文字として表示されます。
- [] 角かっこの中にスペースがない
- [x]閉じかっこの後ろにスペースがない
[ ] 行頭にリスト記号がないこの3行はどれもチェックボックスになりません。角かっこを含めて、書いたとおりの文字列が表示されます。
タスクリスト非対応の環境ではHTMLで代用する
GitHub Flavored Markdownのタスクリストには対応していないものの、生のHTMLは書けるという環境ではinput要素を使います。どこにも保存されない状態を読者が切り替えてしまわないよう、disabledを付けておきます。
<ul>
<li><input type="checkbox" disabled> 未完了のタスク</li>
<li><input type="checkbox" checked disabled> 完了したタスク</li>
</ul>見た目は同じチェックボックス付きリストになりますが、描画するのはMarkdownパーサーではなくブラウザです。ボックスはグレー表示で操作できません。
番号付きリストのチェックボックス
角かっこの印は番号付きリストの項目にも付けられます。好きな順に片づけるのではなく、決まった順番どおりに進めてほしい手順を書くときに向いています。
1. [x] CLIをインストールする
2. [x] ログインする
3. [ ] 最初のデプロイを実行する各ステップにチェックボックスが付いた番号付きリストになり、最初の2つがチェック済みです。GitHubとGitLabのどちらもこの書き方に対応しています。
各サービスでの対応状況
タスクリストはGitHub Flavored Markdownの拡張記法で、オリジナルのMarkdown仕様には含まれていません。そのため太字や見出しほど広くは対応していません。ボックスが表示されるサービスでも、クリックできるかどうかは分かれます。
| プラットフォーム | 対応状況 | 備考 |
|---|---|---|
| GitHub | 対応 | Issue、PR、コメント、Wikiではクリックでき、切り替えると元のMarkdownが書き換わります。READMEでは表示のみです。 |
| GitLab | 対応 | Issue、マージリクエスト、Wikiでクリックでき、リストに進捗カウンターが表示されます。 |
| Obsidian | 対応 | 閲覧モードでもライブプレビューでもクリックできます。テーマによっては [/] などの独自状態にも対応します。 |
| Qiita / Zenn | 対応 | 記事本文でタスクリストが表示されます。ボックスは表示のみで、クリックしても切り替わりません。 |
| Notion | 一部 | - [ ] を貼り付けるとMarkdown記法のままではなく、ネイティブのToDoブロックに変換されます。 |
| VS Codeのプレビュー | 一部 | ボックスは表示されますがクリックはできません。拡張機能を入れるとエディタ上で切り替えられます。 |
| Discord / Slack | 非対応 | どちらもタスクリストに対応していません。☐ と ☑ を使った箇条書きで代用してください。 |
Markdownのチェックボックスリストを作る手順
タスクのテキストを入力する
項目に表示する文言を入力します。生成される各項目には連番が付くため、同じ行が並ぶのではなく、そのまま手直しできるひな形が手に入ります。
先頭項目の状態を選ぶ
チェックなしとチェック済みを切り替えて、[ ] と [x] が出力でどう変わるかを確認します。
件数とインデントを決める
生成する項目数を選びます。既存の親タスクの下にぶら下げるリストであれば、インデントの段数も指定します。
出力をコピーする
Markdownをコピーします。GitHub Flavored Markdownのタスクリストに対応していない環境では、HTMLタブに切り替えてください。
プレビューで確認する
IssueやREADMEに貼り付ける前に、プレビュータブでボックスが表示されるか、入れ子が意図した位置に収まっているかを確認します。
よくある質問
Markdownでチェックボックスを書くには？
本文が角かっこで始まるリスト項目を書きます。- [ ] がチェックなし、- [x] がチェック済みです。ハイフン、その後ろのスペース、対になった角かっこ、閉じかっこの後ろのスペースは、どれも省略できません。リスト記号はアスタリスクやプラス記号でも構いません。
Markdownのチェックボックスが表示されないのはなぜですか？
よくある原因は4つです。- [] のように角かっこの中にスペースがない、閉じかっこの後ろにスペースがない、行頭のリスト記号が抜けている、あるいはそのサービスがGitHub Flavored Markdownのタスクリストに対応していない場合です。最後のケースでは角かっこが必ずそのまま表示されます。
チェックボックスを入れ子やインデントにするには？
子項目を親項目より半角スペース2つ分インデントし、あとは通常どおりチェックボックスを書きます。1段深くするたびにスペースを2つ増やします。インデント幅は揃え、タブと半角スペースを混ぜないでください。ずれると、子項目がサブタスクではなく同じ階層の項目として表示されます。
チェックボックスが使えるサービスはどれですか？
GitHub、GitLab、Obsidian、Typora、Notion、Joplin、Bitbucket、Qiita、Zenn、そしてGitHub Flavored Markdownのパーサーを使う多くの静的サイトジェネレーターで使えます。DiscordやSlack、CommonMarkに厳密なパーサーは非対応で、角かっこがそのまま文字として表示されます。
チェックボックスに大文字のXは使えますか？
使えます。GitHub Flavored Markdownは - [X] と - [x] を同じものとして扱い、どちらもチェック済みになります。ただし小文字のほうが一般的で、多くのエディタやフォーマッタも小文字に揃えます。リポジトリ内の表記を統一するなら小文字をおすすめします。
チェックボックスをクリックできるようにするには？
クリックできるかどうかは記法ではなくサービス側の機能です。GitHubやGitLabのIssue、プルリクエスト、マージリクエスト、Wikiページではタスクリストをクリックでき、切り替えると保存されているMarkdownが書き換わります。同じ記法でも、READMEや静的サイトでは表示のみになります。
チェックボックスに対応していない環境ではどう書けばいいですか？
代替手段は主に2つです。1つはUnicodeの記号を普通の箇条書きで使う方法で、未完了は ☐、完了は ☑ と書きます。もう1つは生のHTMLが書ける場合で、type属性がcheckboxのinput要素にdisabled属性を付け、見た目だけを表示させます。
タスク項目の中に太字やリンク、コードを書けますか？
書けます。閉じかっこより後ろは通常のインラインMarkdownとして解釈されるため、太字、斜体、インラインコード、リンク、画像、打ち消し線がすべて使えます。完了した項目に打ち消し線を引いて、済んだ作業を視覚的に下げる書き方もよく使われます。
チェックボックスとタスクリストは何が違いますか？
同じ機能を指す、粒度の違いです。チェックボックスは - [ ] や - [x] と書いた1つのリスト項目を指し、タスクリストはそれらをまとめたリスト全体を指します。仕様上の正式名称はタスクリストですが、実際に検索されるのは主にチェックボックスという言い方です。
DiscordやSlackでMarkdownのチェックボックスは使えますか？
使えません。どちらもGitHub Flavored Markdownのタスクリストを実装していないため、- [ ] は角かっこが見えたままの文字として表示されます。チャットでは ☐ と ☑ を使った箇条書きや絵文字で、未完了と完了を表すのが現実的です。