VSCode（Visual Studio Code）では、エディター領域を左右や上下に分割し、複数のファイルを同時に表示できます。
HTMLとCSSを並べて編集したり、ソースコードとテストコードを比較したり、同じファイルの離れた場所を同時に確認したりするときに便利です。
VSCodeでは、分割したそれぞれのエディター領域を「Editor Group（エディターグループ）」として扱います。
ここでは、VSCodeで画面やエディターを分割する方法について、ショートカットやドラッグ操作、レイアウト変更、同じファイルの分割表示なども含めて詳しく解説します。
VSCodeの画面分割とは
VSCodeでは、エディターを分割すると複数の「Editor Group」を作成できます。
たとえば、通常は1つのエディター領域だけですが、左右に分割すると次のような状態になります。
┌──────────────┬──────────────┐
│ index.html │ style.css │
│ │ │
└──────────────┴──────────────┘上下に分割することもできます。
┌─────────────────────────────┐
│ index.html │
├─────────────────────────────┤
│ style.css │
└─────────────────────────────┘さらに、左右・上下の分割を組み合わせて、複数のエディターグループをグリッド状に配置することも可能です。
エディターグループとタブは別のもの
VSCodeでは、1つのエディターグループ内に複数のタブを開けます。
そのため、画面を分割することと、単純に複数のファイルをタブで開くことは異なります。
たとえば次のように、左右それぞれのグループに複数のタブを持たせることもできます。
┌────────────────┬────────────────┐
│ index.html │ style.css │
│ about.html │ reset.css │
└────────────────┴────────────────┘複数のファイルを常に並べて確認したい場合は、タブ切り替えよりもエディター分割のほうが効率的です。
VSCodeでエディターを左右に分割する方法
VSCodeでエディターを分割する方法はいくつかあります。
もっとも簡単なのは、エディター右上の分割ボタンを使用する方法です。
Split Editorボタンをクリックする
ファイルを開いた状態で、エディター右上にある「Split Editor」のアイコンをクリックします。
通常は、現在のエディターの右側に新しいエディターグループが作成されます。
分割前は次の状態です。
┌──────────────────────────┐
│ index.html │
└──────────────────────────┘分割すると、次のようになります。
┌─────────────┬─────────────┐
│ index.html │ index.html │
└─────────────┴─────────────┘分割後に右側で別のファイルを開けば、2つのファイルを並べて編集できます。
ショートカットでエディターを分割する方法
頻繁に画面分割を使用する場合は、ショートカットを覚えておくと効率的です。
Windows・Linuxの場合
Ctrl + \macOSの場合
Command + \このショートカットは「Split Editor」コマンドに割り当てられています。
実行すると、新しいエディターグループが作成されます。
ただし、使用しているキーボード配列や独自のキーバインド設定によって、キー操作が異なる場合があります。
実際の割り当ては、VSCodeの「Keyboard Shortcuts」から確認できます。
メニューからエディターを分割する方法
マウス操作でレイアウトを指定したい場合は、VSCodeのメニューを使用する方法もあります。
Editor Layoutからレイアウトを選択する
上部メニューから、
View
→ Editor Layoutを開きます。
日本語UIでは、バージョンや翻訳によって表記が多少異なる場合がありますが、「表示」メニュー内のエディターレイアウト関連項目から選択できます。
VSCodeには、あらかじめ複数のレイアウトが用意されています。
たとえば、左右2分割は次のような形です。
┌────────────┬────────────┐
│ │ │
└────────────┴────────────┘上下2分割は次のようになります。
┌─────────────────────────┐
│ │
├─────────────────────────┤
│ │
└─────────────────────────┘さらに、3列表示やグリッドレイアウトなども選択できます。
タブをドラッグして画面を分割する方法
VSCodeでは、エディタータブをドラッグ＆ドロップするだけでも画面を分割できます。
タブを右側へドラッグする
たとえば「index.html」のタブをエディター右側へドラッグすると、右側に新しいエディターグループを作成できます。
┌─────────────┬─────────────┐
│ index.html │ │
└─────────────┴─────────────┘同様に、左・上・下へドラッグすることで、任意の方向にグループを配置できます。
視覚的にレイアウトを調整できるため、複雑な分割構成を作るときに便利です。
Open to the Sideで別ファイルを横に開く方法
Explorerからファイルを別のエディターグループに開きたい場合は、「Open to the Side」を使用できます。
コンテキストメニューから横に開く
Explorerで対象ファイルを右クリックし、「Open to the Side」に相当する項目を選択すると、別のエディターグループにファイルを開けます。
たとえば、HTMLとCSSを並べる場合は次のようになります。
┌────────────────┬────────────────┐
│ index.html │ style.css │
│ │ │
│ <header> │ header { │
│ │ ... │
│ │ } │
└────────────────┴────────────────┘なお、Explorer上で利用できるキー操作は、OSやキーバインド設定によって変わる場合があります。
一般的な解説では、ショートカットを固定的に覚えるよりも、「Open to the Side」を使用する方法のほうが確実です。
左右分割と上下分割を切り替える方法
VSCodeでは、現在のエディターレイアウトを左右配置と上下配置で切り替えることができます。
Windows・Linuxの場合
Shift + Alt + 0macOSの場合
Option + Command + 0これは「Toggle Vertical/Horizontal Editor Layout」を実行するショートカットです。
たとえば、次の左右配置から、
┌────────────┬────────────┐
│ HTML │ CSS │
└────────────┴────────────┘次の上下配置へ変更できます。
┌─────────────────────────┐
│ HTML │
├─────────────────────────┤
│ CSS │
└─────────────────────────┘分割を作り直さずに配置だけを切り替えたい場合に便利です。
分割したエディターグループを切り替える方法
複数のエディターグループを作成した場合は、キーボードから素早くフォーカスを移動できます。
番号を指定してエディターグループへ移動する
Windows・Linuxでは、
Ctrl + 1
Ctrl + 2
Ctrl + 3macOSでは、
Command + 1
Command + 2
Command + 3で、対応するエディターグループへフォーカスを移動できます。
たとえば、
┌───────────┬───────────┬───────────┐
│ Group 1 │ Group 2 │ Group 3 │
└───────────┴───────────┴───────────┘という状態であれば、
Ctrl + 2で2番目のエディターグループへ移動できます。
ここで移動するのは「2番目のファイル」ではなく、「2番目のエディターグループ」である点に注意してください。
また、VSCodeのエディターグループは3つまでに制限されているわけではありません。
複数のグループを作成できます。
隣のエディターグループへ移動する方法
番号ではなく、方向を指定して別のエディターグループへ移動することもできます。
右側のグループへ移動する
Windows・Linuxでは、
Ctrl + K
Ctrl + →の順番で押します。
左側のグループへ移動する
Ctrl + K
Ctrl + ←を使用します。
このショートカットは、すべてのキーを同時に押すわけではありません。
まず、
Ctrl + Kを押し、そのあと、
Ctrl + →のように次のキーを押します。
VSCodeでは、このような2段階のショートカットをChord形式として使用しています。
同じファイルを分割して表示する方法
VSCodeでは、同じファイルの離れた場所を同時に確認することもできます。
長いプログラムや設定ファイルを編集するときに便利です。
通常のSplit Editorを使う
通常のSplit Editorを実行すると、新しいEditor Groupが作成されます。
同じファイルを左右それぞれのグループに表示すれば、異なる行を同時に確認できます。
たとえば、
左側：50行目
右側：800行目といった使い方ができます。
Split Editor in Groupを使う方法
VSCodeには、通常のSplit Editorとは別に「Split Editor in Group」という機能があります。
Split Editorとの違い
通常のSplit Editorは、新しいEditor Groupを作成します。
┌─────────────┬─────────────┐
│ Group 1 │ Group 2 │
└─────────────┴─────────────┘一方、「Split Editor in Group」は新しいEditor Groupを作成せず、現在のエディターを同じグループ内で2つのビューに分割します。
┌───────────────────────────┐
│ 同じエディターのビュー1 │
├───────────────────────────┤
│ 同じエディターのビュー2 │
└───────────────────────────┘長いファイル内の異なる位置を比較したい場合に便利です。
Split Editor in Groupのショートカット
Windows・Linuxでは、
Ctrl + K
Ctrl + Shift + \macOSでは、
Command + K
Shift + Command + \を使用できます。
関連するコマンドには、分割解除や分割方向の変更などもあります。
Split Editor in Groupのレイアウトを変更する方法
Split Editor in Groupの表示方向は、設定から変更できます。
workbench.editor.splitInGroupLayoutを使用する
VSCodeには、
workbench.editor.splitInGroupLayoutという設定があります。
Split Editor in Groupを使用する機会が多い場合は、好みの分割方向に調整すると操作しやすくなります。
エディター分割のデフォルト方向を変更する方法
通常、Split EditorやOpen to the Sideでは、現在のエディターの右側に新しいグループが作成されます。
この方向は設定から変更できます。
workbench.editor.openSideBySideDirectionを変更する
設定項目は、
workbench.editor.openSideBySideDirectionです。
右側に開く場合は、
"workbench.editor.openSideBySideDirection": "right"下側に開く場合は、
"workbench.editor.openSideBySideDirection": "down"と設定できます。
縦長のディスプレイを使用している場合などは、下方向への分割が使いやすいこともあります。
Altキーで一時的に分割方向を変える方法
設定を変更しなくても、一時的に通常とは異なる方向へ分割できる場合があります。
Split EditorボタンとAltキーを組み合わせる
エディター右上のSplit Editorボタンにマウスを合わせた状態でAltキーを使用すると、通常とは異なる方向の分割操作を選択できます。
たとえば、通常は右側へ分割する設定でも、下方向へ分割したいときに便利です。
毎回設定を変更する必要がないため、左右分割と上下分割を頻繁に使い分ける人に向いています。
分割したエディターのサイズを変更する方法
画面を分割したあと、それぞれのエディターグループの幅や高さは自由に変更できます。
境界線をドラッグする
グループ同士の境界線にマウスポインターを合わせ、そのままドラッグします。
┌────────────│────────────┐
│ │ │
│ │ │
└────────────│────────────┘
↑
境界線左右分割なら横幅、上下分割なら高さを調整できます。
作業中のエディターだけ少し広く表示したい場合に便利です。
エディターグループを一時的に最大化する方法
複数のグループを維持したまま、現在作業しているグループだけを大きく表示できます。
Toggle Maximize Editor Groupを使用する
Windows・Linuxでは、
Ctrl + K
Ctrl + MmacOSでは、
Command + K
Command + Mを使用します。
この操作を実行すると、アクティブなエディターグループを一時的に最大化できます。
もう一度実行すれば元のレイアウトへ戻せます。
タブのダブルクリックでグループを拡大する方法
VSCodeでは、設定によってエディタータブのダブルクリック時の動作を変更できます。
expandとmaximizeの違い
関連する設定として、
workbench.editor.doubleClickTabToToggleEditorGroupSizesがあります。
主な動作には、「expand」「maximize」「off」などがあります。
「expand」は、ほかのグループを小さくしてアクティブグループを広く表示する動作です。
「maximize」は、ほかのグループを一時的に非表示にして、アクティブグループを最大表示する動作です。
似ていますが、完全に同じ動作ではありません。
そのため、「ダブルクリックすれば必ず最大化される」と考えるのではなく、現在の設定によって動作が変わると理解しておくとよいでしょう。
分割したエディターを元に戻す方法
不要になったエディターグループは閉じることができます。
最後のエディターを閉じる
通常は、エディターグループ内にある最後のエディターを閉じると、そのグループ自体も閉じられます。
VSCodeには、
workbench.editor.closeEmptyGroupsという設定があります。
この設定を変更すると、エディターを閉じたあとも空のグループを残すことができます。
コマンドパレットから画面を分割する方法
ショートカットを覚えていない場合は、コマンドパレットを使う方法が便利です。
コマンドパレットを開く
Windows・Linuxでは、
Ctrl + Shift + PmacOSでは、
Command + Shift + Pを押します。
その後、
Split Editorと入力すると、画面分割に関連するコマンドを検索できます。
たとえば、次のようなコマンドがあります。
Split Editor
Split Editor Left
Split Editor Right
Split Editor Up
Split Editor Down
Split Editor in Group目的に合った操作を選択できます。
エディターを別ウィンドウに移動する方法
VSCodeでは、単にエディターを分割するだけでなく、別ウィンドウとして切り離すこともできます。
タブをウィンドウ外へドラッグする
エディタータブを現在のVSCodeウィンドウの外へドラッグすると、独立したウィンドウとして表示できます。
また、タブのメニューから、
Move into New Windowや、
Copy into New Windowといった操作を利用できます。
デュアルモニター環境では特に便利です。
たとえば、
モニター1：HTML・JavaScript
モニター2：CSS・設定ファイルのように作業領域を分けることができます。
エディター分割とターミナル表示の違い
VSCodeでは、エディターとターミナルを上下に表示することもできます。
ただし、これは厳密にはエディターグループ同士の分割とは別の仕組みです。
ターミナルはPanelに表示される
VSCodeのターミナル、Problems、Debug Consoleなどは、通常「Panel」と呼ばれる領域に表示されます。
たとえば次のようなレイアウトです。
┌─────────────────────────────┐
│ Editor │
│ │
├─────────────────────────────┤
│ Terminal │
└─────────────────────────────┘見た目は上下分割に似ていますが、
Editor Groupと、
Panelは別のUI領域です。
そのため、「エディターを上下分割してターミナルを表示する」というより、「エディター領域とPanelを上下に配置する」と考えるほうが正確です。
VSCodeで便利な画面分割ショートカット
代表的なショートカットをまとめると、次のようになります。
| 操作 | Windows・Linux | macOS |
|---|---|---|
| エディターを分割 | Ctrl + \ | Command + \ |
| 1番目のグループへ移動 | Ctrl + 1 | Command + 1 |
| 2番目のグループへ移動 | Ctrl + 2 | Command + 2 |
| 3番目のグループへ移動 | Ctrl + 3 | Command + 3 |
| 左右・上下レイアウト切り替え | Shift + Alt + 0 | Option + Command + 0 |
| グループ内で分割 | Ctrl + K → Ctrl + Shift + \ | Command + K → Shift + Command + \ |
| グループ最大化 | Ctrl + K → Ctrl + M | Command + K → Command + M |
ショートカットはOS、キーボード配列、ユーザー設定によって異なる場合があります。
正確な割り当てを確認したい場合は、VSCodeの「Keyboard Shortcuts」を開いて確認してください。
VSCodeでおすすめの画面分割パターン
作業内容に応じて、画面分割の使い方を変えると効率が上がります。
HTMLとCSSを左右に表示する
Web制作では非常に使いやすい構成です。
┌────────────────┬────────────────┐
│ index.html │ style.css │
└────────────────┴────────────────┘HTMLの構造を確認しながらCSSを編集できます。
HTMLとJavaScriptを並べる
DOM操作やイベント処理を実装するときに便利です。
┌────────────────┬────────────────┐
│ index.html │ script.js │
└────────────────┴────────────────┘HTML側のidやclassを確認しながらJavaScriptを書けます。
ソースコードとテストコードを並べる
プログラミングでは次のような配置も便利です。
┌────────────────┬────────────────┐
│ app.js │ app.test.js │
└────────────────┴────────────────┘実装とテストコードを頻繁に切り替える必要がなくなります。
同じファイルを2か所表示する
大きなファイルを編集している場合は、同じファイルを分割表示すると便利です。
たとえば、
上側：関数の定義
下側：関数の呼び出し部分のように表示できます。
スクロールを何度も往復する必要がなくなります。
コードとターミナルを上下に配置する
実装しながらビルドやテストを繰り返す場合は、エディターとPanelを上下に配置すると効率的です。
┌─────────────────────────────┐
│ Editor │
├─────────────────────────────┤
│ Terminal │
└─────────────────────────────┘コードを編集しながら、すぐにコマンドを実行できます。
VSCodeで画面分割ができないときの確認ポイント
正常に分割できない場合は、いくつかのポイントを確認してみましょう。
ショートカットが変更されていないか確認する
VSCodeでは、ショートカットを自由に変更できます。
そのため、
Ctrl + \を押しても反応しない場合は、Keyboard Shortcutsで「Split Editor」を検索してください。
別のショートカットが割り当てられている可能性があります。
キーボード配列を確認する
日本語配列とUS配列では、一部の記号キーの位置が異なります。
特に「\」を含むショートカットは、環境によって押し方が分かりにくいことがあります。
ショートカットがうまく動作しない場合は、VSCodeのKeyboard Shortcuts画面で実際の割り当てを確認するのが確実です。
コマンドパレットから実行してみる
ショートカットの問題か、VSCode自体の問題かを切り分けるには、コマンドパレットから「Split Editor」を直接実行してみましょう。
コマンドパレットから正常に分割できるのであれば、ショートカット設定が原因である可能性が高いと考えられます。
VSCodeの画面分割を使うときの注意点
画面分割は便利ですが、分割しすぎると逆に使いにくくなる場合があります。
分割数を増やしすぎない
エディターグループを増やしすぎると、1つあたりの表示領域が狭くなります。
特にノートPCなどの小さなディスプレイでは、
2分割または、
3分割程度に抑えたほうがコードを確認しやすいケースが多いでしょう。
一時的な確認には最大化機能を使う
複数のグループを開いたまま、1つのコードに集中したい場合は、グループを閉じるのではなく「Toggle Maximize Editor Group」を利用すると便利です。
元のレイアウトを維持したまま作業スペースを広げられます。
用途に応じて左右と上下を使い分ける
左右に長いコードを扱う場合は、上下分割のほうが見やすいケースがあります。
一方、HTMLとCSSのように短い行が多いファイルを比較する場合は、左右分割が使いやすいでしょう。
画面サイズやコードの内容に合わせて変更するのがおすすめです。
まとめ
VSCodeでは、Editor Groupを利用してエディターを左右・上下に分割できます。
もっとも手軽なのは、エディター右上のSplit Editorボタンを使う方法です。
Windows・Linuxでは、
Ctrl + \macOSでは、
Command + \でも素早く分割できます。
また、タブのドラッグ＆ドロップ、ViewメニューのEditor Layout、Open to the Sideなどを利用すれば、用途に応じたレイアウトを作成できます。
さらに、通常のSplit Editorだけでなく、「Split Editor in Group」を利用すると、新しいEditor Groupを作らずに同じエディター内を2つのビューに分割できます。
長いソースコードを扱う場合には非常に便利です。
分割したエディターグループは、
Ctrl + 1
Ctrl + 2
Ctrl + 3などで素早く切り替えることができます。
また、
Shift + Alt + 0を使えば、左右配置と上下配置を簡単に切り替えられます。
Web制作では「HTML＋CSS」、プログラミングでは「実装コード＋テストコード」といった組み合わせで画面を分割すると、タブを何度も切り替える必要がなくなります。
VSCodeの画面分割をうまく活用すると、複数ファイルの比較や参照がしやすくなり、コーディング作業をより効率的に進められます。
以上、VSCodeで画面やエディターを分割する方法についてでした。
最後までお読みいただき、ありがとうございました。
