制作中にいちばん多く触るのは、じつはエディタの外です。ブラウザで確認して、スクショを撮って、ウィンドウを並べて、日本語と英数を切りかえる——この記事では、VSCodeの外側で効くショートカットをMac/Windows両対応でまとめます。
まず3つだけ
全部を覚える必要はありません。制作中に毎日出番があるのはこの3つです。
| やりたいこと | Mac | Windows |
|---|---|---|
| 強制リロード（キャッシュ無視） | ⌘ + ⇧ + R | Ctrl + ⇧ + R |
| 書式なしペースト | ⌘ + ⇧ + V | Ctrl + ⇧ + V |
| 範囲を選んでスクショ | ⌘ + ⇧ + 4 | Win + ⇧ + S |
ブラウザ：作ったページを確認する
強制リロード（キャッシュを無視して読み込む）
⌘ + ⇧ + R / Ctrl + ⇧ + R
「CSSを直したのに見た目が変わらない」の9割はこれで解決します。ブラウザは一度読んだCSSや画像を保存して使い回すので、ふつうのリロード（⌘ + R）では古いファイルが表示されたままになることがあります。強制リロードは保存を無視して取り直します。
開発者ツールを開く
⌘ + ⌥ + I / F12（または Ctrl + ⇧ + I）
要素を直接選んで調べたいときは ⌘ + ⇧ + C / Ctrl + ⇧ + C。マウスカーソルが選択モードになり、クリックした要素のHTMLとCSSがすぐ開きます。コンソールだけを開きたいときは ⌘ + ⌥ + J / Ctrl + ⇧ + J です。
タブとページの操作
| やりたいこと | Mac | Windows |
|---|---|---|
| 閉じたタブを復活させる | ⌘ + ⇧ + T | Ctrl + ⇧ + T |
| 新しいタブ／タブを閉じる | ⌘ + T / ⌘ + W | Ctrl + T / Ctrl + W |
| 左右のタブへ移動 | ⌘ + ⌥ + ←→ | Ctrl + PageUp / PageDown |
| 左から数えて◯番目のタブへ | ⌘ + 1〜8 | Ctrl + 1〜8 |
| アドレスバーにカーソルを移す | ⌘ + L | Ctrl + L |
| ページ内を検索 | ⌘ + F | Ctrl + F |
| 拡大・縮小／元の倍率に戻す | ⌘ + ＋ / － ／ ⌘ + 0 | Ctrl + ＋ / － ／ Ctrl + 0 |
| シークレットウィンドウで開く | ⌘ + ⇧ + N | Ctrl + ⇧ + N |
「閉じたタブを復活させる」は、参考記事を間違って閉じたときの保険です。何度も押すとさかのぼって開き直せます。
画面キャプチャ：見た目を記録する
デザインの参考を残す、不具合を人に伝える、記事に載せる。制作では撮る回数がとても多い操作です。
Mac
| やりたいこと | キー |
|---|---|
| 範囲を選んで撮る | ⌘ + ⇧ + 4 |
| 画面全体を撮る | ⌘ + ⇧ + 3 |
| ウィンドウ単位で撮る | ⌘ + ⇧ + 4 を押して スペース → 撮りたいウィンドウをクリック |
| 撮影メニューを開く（動画も撮れる） | ⌘ + ⇧ + 5 |
| ファイルにせずクリップボードへ入れる | 上のキーに Ctrl を足す |
Windows
| やりたいこと | キー |
|---|---|
| 範囲を選んで撮る | Win + ⇧ + S |
| 画面全体をファイルに保存 | Win + PrintScreen |
| 今使っているウィンドウだけコピー | Alt + PrintScreen |
ウィンドウ：2画面がなくても並べる
エディタとブラウザを並べたいのに画面が1枚、という状況はショートカットで大きく改善できます。
| やりたいこと | Mac | Windows |
|---|---|---|
| アプリを切りかえる | ⌘ + Tab | Alt + Tab |
| 同じアプリの別ウィンドウへ | ⌘ + `（バッククォート） | Alt + Tab で選択 |
| 画面の左半分／右半分に寄せる | ⌘ + ⌥ + ← / → | Win + ← / → |
| 作業スペース（仮想デスクトップ）を切りかえる | Ctrl + ←→ | Win + Ctrl + ←→ |
| 開いているウィンドウを一覧する | Ctrl + ↑ | Win + Tab |
| デスクトップを表示する | ⌘ + F3 | Win + D |
左右に寄せる操作を覚えると、1枚の画面でも左にエディタ、右にブラウザという配置が一瞬で作れます。作業スペースの切りかえは「調べもの用の画面」と「作業用の画面」を分けるのに向いています。
画面そのものを増やしたい場合は、こちらでモニターの選び方をまとめています。
べんりワザ画面を2つにして学習のスピードを上げよう画面を2つにして学習のスピードを上げよう——サイズ・解像度・接続の選び方日本語入力：全角と半角で詰まらない
コードは半角、コメントは日本語。切りかえで詰まるのは初心者がいちばん多く踏むつまずきです。
| やりたいこと | Mac | Windows |
|---|---|---|
| 日本語と英数を切りかえる | かな / 英数 キー（または ⌘ + スペース） | 半角/全角 キー |
| 入力した文字をカタカナにする | F7 | F7 |
| 入力した文字を半角英数にする | F10 | F10 |
| 入力した文字を全角英数にする | F9 | F9 |
| 確定したばかりの変換をやり直す | Ctrl + ⇧ + Z（アプリによる） | Ctrl + Backspace |
Macのキーボードには かな と 英数 キーが独立してあるので、「日本語を打つ前に かな、コードを打つ前に 英数」と押しきる癖をつけると切りかえミスが消えます。トグル（押すたびに入れかわる方式）より確実です。
どのアプリでも効くテキスト編集
エディタ・ブラウザ・チャット・メール、どこでも同じように使える操作です。
| やりたいこと | Mac | Windows |
|---|---|---|
| 書式なしで貼り付ける | ⌘ + ⇧ + V | Ctrl + ⇧ + V |
| 行の先頭／末尾へ移動 | ⌘ + ← / →（または Ctrl + A / Ctrl + E） | Home / End |
| 単語ごとに移動 | ⌥ + ←→ | Ctrl + ←→ |
| 移動しながら選択する | 上の操作に ⇧ を足す | 上の操作に ⇧ を足す |
| すべて選択 | ⌘ + A | Ctrl + A |
| 応答しないアプリを終了する | ⌘ + ⌥ + Esc | Ctrl + ⇧ + Esc（タスクマネージャー） |
書式なしペーストは、Webサイトからコピーした文字を貼るときの必須ワザです。ふつうに貼ると文字色やフォントまで付いてきますが、これなら中身の文字だけが入ります。
ファイル操作：Finderとエクスプローラー
制作ではファイル名の変更やフォルダ作成をひたすら繰り返します。ここのOS差は大きいので、両方使う人は要注意です。
| やりたいこと | Mac（Finder） | Windows（エクスプローラー） |
|---|---|---|
| 名前を変更する | Return | F2 |
| 開く | ⌘ + ↓（または ⌘ + O） | Enter |
| 新しいフォルダを作る | ⌘ + ⇧ + N | Ctrl + ⇧ + N |
| 隠しファイルの表示を切りかえる | ⌘ + ⇧ + .（ピリオド） | ［表示］メニューから切りかえ |
| パスを直接入力して開く | ⌘ + ⇧ + G | Ctrl + L |
| コピーしたファイルを移動する | ⌘ + C → ⌘ + ⌥ + V | Ctrl + X → Ctrl + V |
Macの「名前変更はReturn、開くは⌘ + ↓」は、Windowsとちょうど逆に感じる部分です。ここだけ意識しておくと、意図せずファイルを開いてしまう事故が減ります。
隠しファイルの表示は、.htaccess や .gitignore のように先頭がドットのファイルを扱うときに必要になります。Macは覚えておくとそのまま使えるので、この1つだけでも得です。
覚え方のコツ
- 手がマウスに伸びた瞬間が覚えどき。その操作だけ調べる
- 1週間に1つか2つでいい。同時に5つは残らない
- アプリごとに違うものは無理に覚えず、OS共通のものを優先する
エディタの中のショートカットは、こちらでまとめています。
べんりワザ覚えて得するVSCodeショートカット覚えて得するVSCodeショートカット——Mac/Windows両対応の厳選版1まとめ
- まず3つ。強制リロード・書式なしペースト・範囲スクショ
- 「CSSを直したのに変わらない」は
⌘ + ⇧ + R/Ctrl + ⇧ + Rで解決することが多い - 撮ったスクショがファイルになるのかクリップボードなのかを区別して使う
- 画面が1枚でも、左右に寄せる操作でエディタとブラウザを並べられる
- 日本語入力は
かな／英数を押しきる。全角記号はエラーの原因になる - MacとWindowsは読み替えで大半が通じるが、名前変更と全選択は例外として覚える
マウスに伸びる手が減るほど、考えている時間が長くなります。