VSCodeでMarkdown（マークダウン）を書き始めた皆さん、こんにちは！エンジニアの翔平です。 「資料を書き始めたけど、実際の見栄えをすぐに確認したい…」 「ショートカットって何だっけ？」 そんな風に思っていませんか？
実は、VSCodeには最初から便利なプレビュー機能が備わっています。今回は、迷わず一瞬でプレビューを表示する方法を、初心者の方にも分かりやすく丁寧に解説しますね。これをマスターして、執筆スピードを爆速にしていきましょう！
1. プレビューを表示する2つの基本操作
VSCodeでMarkdownのプレビューを出す方法は、主に2つあります。ご自身の使いやすい方を覚えてくださいね。
① ショートカットキーで一瞬で開く（おすすめ！）
キーボード操作が一番早くて効率的です。
- Windows:
Ctrl+Shift+V - Mac:
Cmd+Shift+V
これだけで、今書いているファイルがプレビュー画面に切り替わります。
② アイコンをクリックして開く
マウス派の方は、エディタの右上にある**「エディターを右側にプレビュー表示」アイコン**をクリックしましょう。 （虫眼鏡のようなマークがついた、分割されたウィンドウのアイコンです。）
2. 作業が捗る「サイド・バイ・サイド」表示
「左側で書きながら、右側でリアルタイムに確認したい」という時に便利なのが、分割表示です。
- ショートカット:
Ctrl+Kの後にV（Windowsの場合） - メリット: 文字を入力した瞬間に右側のプレビューが更新されるので、ミスにすぐ気づけます。
プロの小技： 画面が狭いときは、プレビュー画面をドラッグして別ウィンドウとして切り離すこともできますよ！
3. さらに便利にする定番拡張機能
標準機能だけでも十分使えますが、世界中のエンジニアが愛用している「これだけは入れておきたい」拡張機能を紹介します。
- Markdown All in One: ショートカットの強化や目次の自動作成など、Markdown執筆に必要な機能がすべて詰まった神プラグインです。
- Markdown Preview Enhanced: より高度な図解（UML）や数式を使いたい方に最適です。
4. 見た目を自分好みに変えてみませんか？
プレビューが表示できたら、次に気になるのが「見た目の素っ気なさ」ではないでしょうか。 デフォルトのプレビューは少しシンプルすぎて、テンションが上がらないこともありますよね。
そんな時は、CSSを使って自分好みのデザインにカスタマイズするのがエンジニア流の楽しみ方です！
- 「見出しをもっとおしゃれにしたい」
- 「GitHubやNotionのような見た目にしたい」
- 「フォントを読みやすく変えたい」
そんな方向けに、コピペで即戦力のCSS設定ガイドをこちらの記事で詳しく解説しています。
まとめ：Markdownを楽しもう！
プレビュー表示は、Markdown執筆の第一歩です。 まずは基本のショートカットを指に覚えさせて、快適な執筆ライフを送ってくださいね。
もし「こんな表示はできないの？」といった疑問があれば、いつでもコメントやSNSで教えてください。一緒に最強のエディタ環境を作っていきましょう！
コメント