【Markdown】チェックボックスを指定するやり方を解説します

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在5社経験している、15年目エンジニアです。

この記事では、 Markdownでチェックボックスを指定するやり方について

• チェックリストを指定するやり方
• チェックリストを指定するときの注意点
• サンプルプログラム

と、丁寧に解説していきます。

前提条件：実行環境について

実行環境は以下の通りです。

Visual Studio Codeは、Markdownファイルを編集と表示させるために使っています。
インストールするやり方は、こちらの記事をご参考ください。

Visual Studio CodeでMarkdownのチェックボックスを表示させるようにするには、Markdown All in Oneという拡張機能を入れる必要があります。
Markdown All in Oneについては、こちらの記事をご参考ください。

チェックボックスを指定するやり方

Markdownで斜体を指定するには、行の先頭に-（ハイフン）と[]（角括弧）を指定します。
チェックしている状態を表現する場合には、[]の中にxを入れます。

使い方サンプルは以下になります。

画面では

というように表示されます。
チェック部分を押すと、チェックの状態が変化します。

チェックリストを指定するときの注意点

1. 「-」と「[」の間に1つ以上半角スペースを入れているか
2. チェックしない状態の場合、「[」と「]」の間に1つ半角スペースを入れているか
3. 「]」と項目に1つ以上半角スペースを入れているか

です。
これらを指定していないと、チェックリストと認識されなくなるためです。

たとえば

このような指定をしていると

とリストやただの文字として表示されてしまいます。

ご注意ください。
では、次の章で実際に使ってみます。

チェックボックスを指定するときの注意点

チェックボックスを解説するプログラムでは

• チェックしている状態
• チェックしていない状態

でチェックボックスを指定して画面表示させて内容を確認します。

サンプルプログラム

実行結果

作成したMarkdownファイルをVisual Studio Codeで表示させます。
やり方は、こちらの記事をご参考ください。

チェックボックスを指定した通りチェックのありなしで表示されていることが確認できました。

まとめ：チェックボックスを表示させてみよう！

以上がMarkdownでチェックボックスを指定するやり方についての解説でした！

あなたのご参考になったのなら、とても嬉しいです(*´▽｀*)
ではでは～(・ω・)ﾉｼ