Visual Studio Code（VS Code）でHTMLやCSSをコーディングしていると、何度も繰り返す操作があります。
行を上下に移動したり、同じHTMLを複製したり、インデントを整えたり、コメントアウトしたり。
マウスでも操作できますが、ショートカットキーを覚えておくとコーディング作業がかなり楽になります。
ところが、しばらくVS Codeを使わない期間があると、「あの操作、何キーだったっけ？」と忘れてしまうことがあります。
そこでこの記事では、Windows版VS CodeでHTML・CSSを書くときによく使うショートカットキーを、実際の画面を使いながらまとめます。
VSCodeでよく使うショートカットキー一覧
| 操作 | Windowsショートカット |
|---|---|
| 行を上・下へ移動 | Alt ＋ ↑ / ↓ |
| 行を上・下へ複製 | Shift ＋ Alt ＋ ↑ / ↓ |
| インデントを下げる | Ctrl ＋ ] |
| インデントを戻す | Ctrl ＋ [ |
| コメントアウト・解除 | Ctrl ＋ / |
コピーのCtrl ＋ C、貼り付けのCtrl ＋ V、切り取りのCtrl ＋ Xとあわせて覚えておくと便利です。
※この記事ではWindows版Visual Studio Codeの標準ショートカットキーを使用しています。
VSCodeで行を選択する方法
複数行をまとめて移動・複製・インデント変更したい場合は、対象となる部分をマウスで選択します。
1行だけを操作する場合は、必ずしも行全体を選択する必要はありません。操作したい行にカーソルを置くだけでもショートカットを実行できます。
複数行をまとめて操作するときは、対象部分を選択してからショートカットキーを使うと分かりやすいです。
VSCodeで行を上下に移動する｜Alt＋↑ / ↓
HTMLを書いていると、「この行をもう少し上へ移動したい」「この要素を下へ移したい」ということがよくあります。
たとえば、下のようなHTMLで<div class=”rogo”>～</div>を別の位置へ移動したい場合です。
移動したい行にカーソルを置くか、複数行なら対象部分を選択します。
Alt ＋ ↑ / ↓を押すと、選択した行をそのまま上下へ移動できます。
コピーして元の行を削除する必要がないため、HTMLの並び順を変更するときに便利です。
VSCodeで行を複製する｜Shift＋Alt＋↑ / ↓
同じHTMLを何度も使いたいときは、コピー＆ペーストより行の複製を使う方が簡単です。
たとえば、<div class=”rogo”>～</div>と同じ構造を複製したい場合です。
複製したい行にカーソルを置くか、対象となる複数行を選択します。
Shift ＋ Alt ＋ ↑ / ↓を押すと、選択した内容を上または下へそのまま複製できます。
同じカード、メニュー、リスト、商品欄などを続けて作るときにも使いやすいショートカットです。
VSCodeでインデントを変更する｜Ctrl＋] / Ctrl＋[
HTMLやCSSでは、コードの階層を分かりやすくするためにインデント（字下げ）を整えることが重要です。
たとえば、<header>～</header>の中に入っているHTMLを一段右へ下げると、どの要素がheader内にあるのか見分けやすくなります。
インデントを変更したい行を選択します。
Windows版VS Codeでは、
- Ctrl ＋ ]：インデントを右へ移動
- Ctrl ＋ [：インデントを左へ戻す
という操作になります。
コード全体のインデントを整理すると、HTMLの親子関係がかなり確認しやすくなります。
VSCodeでコメントアウトする｜Ctrl＋/
HTMLやCSSを書いていると、コードの内容を説明するためのコメントを入れたり、一時的にコードを無効にしたりすることがあります。
たとえば「ヘッダー」「ナビバー」「コンセプト」など、自分がコードの場所を確認するために入れた説明文をそのままHTMLに記述すると、ブラウザ上にも表示されてしまいます。
そのような場合は、対象部分を選択してCtrl ＋ /を押します。
VS Codeが、そのファイルの言語に応じたコメント形式へ切り替えてくれます。
同じCtrl＋/をもう一度押せば、コメントを解除できます。
ヘッダー部分をコメントアウト
ナビバー部分をコメントアウト
コンセプト部分をコメントアウト
完成していないHTMLを一時的に非表示にするときにも便利
コメントアウトは、説明を書くためだけではありません。
「HTMLは作ったけれど、まだ公開したくない」という部分を一時的に無効化するときにも使えます。
たとえばナビゲーションメニューは作ったものの、リンク先のページがまだ完成していない場合です。
対象部分をコメントアウトしておけば、コードを削除せずにブラウザ上から一時的に非表示にできます。
VSCodeショートカットキーまとめ
今回紹介したWindows版VS Codeのショートカットキーをもう一度まとめます。
- Alt ＋ ↑ / ↓：行を上下へ移動
- Shift ＋ Alt ＋ ↑ / ↓：行を上下へ複製
- Ctrl ＋ ]：インデントを右へ移動
- Ctrl ＋ [：インデントを左へ戻す
- Ctrl ＋ /：コメントアウト・解除
すべてのショートカットキーを一度に覚える必要はありません。
HTMLやCSSを書いていて何度も繰り返している操作からショートカットに置き換えていくと、自然に使えるようになります。
特に行移動・行の複製・インデント・コメントアウトは、HTML/CSSのコーディングで使用する機会が多いため、最初に覚えておくと便利です。
