How to

Markdown メモ帳の使い方

Markdown 入力とエディタ編集を切り替えながら、テーマ付きプレビューを確認できるツールです。分割表示と全画面表示を切り替えて作業できます。記事やドキュメントを下書きしながら見た目を確認したい時に向いています。

Markdown メモ帳を使う

手順: 2 ステップ
案内: 画像つき解説
内容: 注意点と FAQ

Use Cases

こんな時に使います

記事やドキュメントを下書きしながら見た目を確認したい
複数テーマでコードブロックや引用の見え方を比較したい
長い Markdown を全画面で確認しながら整えたい
GitHub に上げる前に README の見た目を確認したい
コードブロックのシンタックスハイライトを複数テーマで比較したい
Markdown テンプレートの出力を素早く確認したい

Capabilities

このツールでできること

Markdown とエディタの相互編集
テーマ付きプレビュー
分割表示と全画面表示の切り替え
コードブロックのシンタックスハイライト
エディタと全画面プレビューの切り替え
テーマ別の見え方を並べて確認

Steps

手順

画面を見ながら進められるように、操作の順番と確認ポイントをまとめています。

STEP 1

Markdown を入力する

左側の Markdown 入力欄へ内容を書き込みます。右側では、入力内容がそのままプレビューに反映されます。

Markdown メモ帳ツールの入力エリアだけを切り出したキャプチャ。左側の Markdown 入力欄を示している

Markdown メモ帳ツールの入力エリアだけを切り出した SP 向けキャプチャ。左側の Markdown 入力欄を示している

確認ポイント

入力内容が左側の編集エリアへ表示されること
右側のプレビューへ内容が反映されること

この画面で使う操作

見出しの変更

H1、H2、H3 を使って見出しレベルを切り替えます。選択中の行やテキストへそのまま反映されます。

Markdown メモ帳の入力エリア。見出し 1、見出し 2、見出し 3 の操作位置を切り出した画面

Markdown メモ帳の入力エリア。見出し 1、見出し 2、見出し 3 の操作位置を切り出した SP 画面

文字の強調

太字、斜体、インラインコードを使って、本文の中で伝えたい箇所を強調できます。

Markdown メモ帳の入力エリア。太字、強調、インラインコードの操作位置を切り出した画面

Markdown メモ帳の入力エリア。太字、強調、インラインコードの操作位置を切り出した SP 画面

リストと引用

箇条書き、番号付きリスト、引用を切り替えながら、README や手順書の構造を整えられます。

Markdown メモ帳の入力エリア。引用、箇条書き、番号付きリストの操作位置を切り出した画面

Markdown メモ帳の入力エリア。引用、箇条書き、番号付きリストの操作位置を切り出した SP 画面

コードブロックとリンク

コードブロックを挿入したり、リンクボタンからテキストと URL を分けて編集できます。

Markdown メモ帳の入力エリア。コードブロックとリンクの操作位置を切り出した SP 画面

元に戻す / やり直す

Mac は Cmd + Z、Shift + Cmd + Z、Windows は Ctrl + Z、Ctrl + Shift + Z で編集を戻したりやり直したりできます。

キーボード操作

Markdown エディタでは Tab / Shift + Tab でインデントやネストを調整できます。Cmd または Ctrl と組み合わせると、B で太字、I で斜体、Shift + X で打ち消し線、K でリンク、Alt + 0 で段落、Alt + 1〜6 で見出し、Shift + 7 / 8 / 9 で番号付きリスト・箇条書き・引用、Alt + C でコードブロックを切り替えられます。プレビューエディタでも、リストや引用を選択中なら Tab / Shift + Tab でネストを調整できます。

STEP 2

テーマとレイアウトを切り替えて確認する

テーマを切り替えながら見え方を確認します。必要に応じて分割表示、Markdown のみ表示、プレビューのみ表示を切り替え、全画面表示で広く確認します。

Markdown メモ帳ツールのプレビューエリアだけを切り出したキャプチャ。右側のプレビュー面を示している

Markdown メモ帳ツールのプレビューエリアだけを切り出した SP 向けキャプチャ。右側のプレビュー面を示している

確認ポイント

GitHub Light、GitHub Dark、Presentation、Notebook、Terminal で見え方を切り替えられること
分割表示、片側表示、全画面表示を切り替えられること
コードブロックや引用が区別されて見えること

この画面で使う操作

テーマ切り替え

GitHub Light、GitHub Dark、Presentation、Notebook、Terminal を切り替えて、公開前の見え方を比較できます。

Markdown メモ帳の表示切り替えエリア。テーマを変更する場所だけを切り出した画面

Markdown メモ帳の表示切り替えエリア。テーマを変更する場所だけを切り出した SP 画面

分割表示

左で Markdown、右でプレビューを同時に見ながら編集できます。README や記事下書きの調整に向いています。

片側表示

Markdown だけ、またはプレビューだけを表示して、入力や確認に集中できます。

全画面表示

Markdown またはプレビューをブラウザいっぱいに広げて、長文やコードブロックを見やすい状態で確認できます。

Markdown メモ帳の表示切り替えエリア。全画面表示を選ぶ場所を切り出した SP 画面

コピー

各パネル右上のコピーアイコンから、現在の Markdown をすぐにコピーできます。

Markdown メモ帳の各パネル右上にあるコピーアイコンを切り出した SP 画面

Notes

使う時の注意

使う前に確認しておくと迷いにくいポイントを、理由つきでまとめています。

確認すること

テーマを切り替えて、公開先に近い見え方を確認する

同じ Markdown でも、見出し、コードブロック、引用の見え方はテーマによって変わります。下書きの段階で比較しておくと、公開直前の調整が減ります。

確認すること

全画面表示で長文やコードブロックを確認する

長い文章やコードサンプルを確認する時は、全画面表示に切り替えると視線が散らず、見出しの流れや改行位置を落ち着いて確認できます。

確認すること

ローカル画像の読み込みには対応していない

Markdown 内の画像は URL 参照で表示します。ローカルファイルのパスを指定した画像は表示されません。公開済み画像の URL を使用してください。

FAQ

Markdown メモ帳に関する質問

使う前に判断しやすい質問を先に整理します。

GitHub を開かずに使う意味はありますか？

あります。テーマを切り替えながら見え方を比較したり、長文を全画面で確認したり、Markdown とプレビューを並べて細かく調整したい時に向いています。

長い文章やコードブロックも確認しやすいですか？

はい。分割表示、片側表示、全画面表示を切り替えられるため、長文やコードブロックを見やすい状態で確認できます。

画像やリンクも表示できますか？

Markdown 標準の構文に対応しています。ローカル画像の読み込みには対応していません。公開済み画像の URL を使用してください。

作成した Markdown を保存できますか？

自動保存は行いません。テキストをコピーして別途保存するか、ブラウザの保存機能をご利用ください。

テーブルも表示できますか？

はい。Markdown テーブル構文に対応しています。列幅はプレビューテーマに合わせて表示します。

複数ファイルを同時に開けますか？

このページは 1 つの Markdown 入力エリアで動作します。複数ファイルの同時編集には対応していません。

次に見る使い方

Markdown メモ帳の使い方

こんな時に使います

このツールでできること