カスタムレイアウト

Visual Studio Code には、シンプルなユーザーインターフェースと便利なデフォルトレイアウトが付属しています。同時に、VS Code は、好みや作業スタイルに合わせて UI レイアウトをカスタマイズするためのオプションと設定を提供します。このトピックでは、ビュー、エディター、パネルを最も生産的な方法で表示できるように、さまざまな UI カスタマイズについて説明します。

この記事ではまず、サイドバー、ビュー、パネルなどの UI 要素を再配置するためのワークベンチのカスタマイズについて説明します。記事の後半では、エディターグループ、分割エディター、エディタータブを使用したエディター領域のカスタマイズについて説明します。

注

VS Code を初めて使用する場合は、ユーザーインターフェースの概要から始めるか、ヒントとテクニックの記事をご覧ください。

ワークベンチ

既定では、プライマリサイドバーはワークベンチの左側に配置され、エクスプローラー、検索、ソース管理ビューなどのビューが表示されます。アクティビティバーのアイコンを選択することで、ビューをすばやく切り替えることができます。

Explorer view opened in the Primary Side Bar, located on the left of the screen.

プライマリサイドバーの位置を変更するには、次のようにします。

アクティビティバーを右クリックし、プライマリサイドバーを右に移動 を選択します。
表示: プライマリサイドバーの位置を切り替える を実行して、プライマリサイドバーを左右に切り替えます。
表示 > 外観 > プライマリサイドバーを右に移動 メニュー項目を使用します。
設定エディターで、ワークベンチ > サイドバー: 場所 (workbench.sideBar.location) の設定を right に設定します。

既定では、VS Code はエディター領域の左側にあるプライマリサイドバーにビューを表示します。2つのビューを同時に開いて表示すると便利な場合があります。これを行うには、セカンダリサイドバー を使用して、プライマリサイドバーの反対側にビューを表示できます。セカンダリサイドバーは、プライマリサイドバーの位置を切り替えたかどうかに関係なく、常にプライマリサイドバーの反対側に配置されます。

次の図は、プライマリサイドバーにエクスプローラービューを、セカンダリサイドバーに Copilot Chat ビューを示しています。

Explorer view in the Primary Side Bar and Copilot Chat view in the Secondary Side Bar.

セカンダリサイドバーを表示するには、VS Code のタイトルバーにあるレイアウトコントロールを使用します。レイアウトコントロールが表示されていない場合は、VS Code のタイトルバーを右クリックし、レイアウトコントロール を選択します。

Title bar buttons to toggle main UI elements, with hover on Toggle Secondary Side Bar.

または、次のようにセカンダリサイドバーを開くこともできます。

表示: セカンダリサイドバーの表示を切り替える コマンドを実行します (⌥⌘B (Windows、Linux Ctrl+Alt+B) を押します)。
表示 > 外観 > セカンダリサイドバー メニュー項目を使用します。

新しいウィンドウまたはワークスペースを開いたときにセカンダリサイドバーを自動的に表示したい場合は、workbench.secondarySideBar.defaultVisibility 設定でこれを構成できます。

いつでも、ビューとパネルをプライマリサイドバーまたはセカンダリサイドバーにドラッグ＆ドロップできます。VS Code は、セッション間でビューとパネルのレイアウトを記憶します。

Drag and drop views and panels between the Primary and Secondary Side Bar

注

表示: ビューの場所をリセット コマンドを使用して、ビューとパネルを既定の場所に戻すことができます。

コマンドパレットの位置

マウスカーソルで上端を掴んでドラッグすることで、コマンドパレットを別の場所に移動できます。タイトルバーの レイアウトのカスタマイズ コントロールを選択し、事前構成された クイック入力位置 のいずれかを選択することもできます。

Screenshot that shows the Command Palette in a different location, highlighting the Customize Layout control in the title bar and the preconfigured position options.

アクティビティバーの位置

既定では、アクティビティバーはプライマリサイドバーと共に移動し、ワークベンチの外縁に留まります。アクティビティバーを非表示にするか、プライマリサイドバーの上部または下部に移動することを選択することもできます。

アクティビティバーの位置 メニューは、アクティビティバーのコンテキストメニューから、または表示 > 外観 > アクティビティバーの位置 にあり、既定、上、下、または 非表示 のオプションがあります。

アクティビティバーが上部または下部の位置にある場合、通常アクティビティバーの下部にある アカウント および管理ボタンは、タイトルバーの右側に移動します。

Activity Bar in top position with Account and Manage buttons on the right of the title bar

レイアウトのカスタマイズコントロール

VS Code のタイトルバーには、主要な UI 要素 (サイドバーとパネル領域) の表示を切り替えるボタンもあります。

Title bar buttons to toggle main UI elements, with hover on Toggle Panel

一番右のボタンをクリックすると レイアウトのカスタマイズ ドロップダウンが表示され、さまざまな UI 要素の表示とレイアウトをさらに変更でき、いくつかのレイアウトモードが含まれています。

Customize Layout dropdown shown via the Customize Layout button in the title bar

レイアウトモードは次のとおりです。

フルスクリーン - エディターをディスプレイ画面全体に表示するように設定します。表示: フルスクリーンに切り替える (⌃⌘F (Windows、Linux F11))。
Zen モード - エディター領域を除くすべての UI を非表示にします。表示: Zen モードの切り替え (⌘K Z (Windows、Linux Ctrl+K Z))。
中央揃えレイアウト - エディターをエディター領域の中央に配置します。表示: 中央揃えレイアウトの切り替え。

次の設定を使用して、VS Code のウィンドウとメニューバーの外観をカスタマイズできます。

window.titleBarStyle: VS Code ウィンドウのタイトルバーの外観を OS ネイティブまたはカスタムに調整します。変更を適用するには、完全に再起動する必要があります。
window.title: 開いているワークスペースやアクティブなエディターなど、現在のコンテキストに基づいて VS Code ウィンドウのタイトルを設定します。変数はコンテキストに基づいて置換されます。たとえば、${activeEditorShort} は現在アクティブなエディターのファイル名を表示します。${dirty}${activeEditorShort}${separator}${rootName}${separator}${profileName}${separator}${appName} のように複数の変数を組み合わせることができます。
window.titleSeparator: window.title 設定で使用される区切り文字です。
window.menuStyle: メニューのスタイルを、OS ネイティブ、カスタム、またはタイトルバースタイル (window.titleBarStyle で定義) から継承するように調整します。これはコンテキストメニューの外観にも影響します。変更を適用するには、完全に再起動する必要があります。
window.menuBarVisibility: メニューバーの表示を設定します。
- classic: メニューバーはウィンドウの上部に表示され、ウィンドウがフルスクリーンモードの場合にのみ非表示になります。
- visible: メニューバーは、ウィンドウがフルスクリーンモードの場合でも常に表示されます。
- toggle: メニューバーは非表示になり、Alt キーを 1 回押すと表示されます。
- compact: メニューはサイドバーに移動されます。
- hidden: メニューバーは常に非表示になります。

パネル

パネル領域には、問題、ターミナル、出力パネルなどの UI 要素が表示され、既定ではエディター領域の下に配置されます。

パネルの位置

領域をエディターの左、右、下、または上に移動できます。これらのオプションは、表示 > 外観 > パネルの位置 のメニュー、またはパネルのタイトルバーのコンテキストメニューから設定できます。

コマンドパレットで パネルの移動 コマンドを使用することもできます。

表示: パネルを左に移動 (workbench.action.positionPanelLeft)
表示: パネルを右に移動 (workbench.action.positionPanelRight)
表示: パネルを下に移動 (workbench.action.positionPanelBottom)
表示: パネルを上に移動 (workbench.action.positionPanelTop)

パネルの配置

このオプションでは、下部のパネルがウィンドウ全体にどの程度広がるかを構成できます。4つのオプションがあります。

中央 - これが既定の動作です。パネルはエディター領域の幅のみに広がります。
両端揃え - パネルはウィンドウの全幅に広がります。
左 - パネルはウィンドウの左端からエディター領域の右端まで広がります。
右 - パネルはウィンドウの右端からエディター領域の左端まで広がります。

すべてのパネル配置オプションにおいて、アクティビティバーはウィンドウの端と見なされます。

これらのオプションは、表示 > 外観 > パネルの配置 のメニュー、パネルのタイトルコンテキストメニュー、または新しい パネルの配置を設定... コマンドを使用して設定できます。

パネルサイズの最大化

パネルの配置が中央の場合、パネル領域の右上にある パネルサイズの最大化 シェブロンボタンを使用して、パネル領域全体をエディター領域で埋めるようにすばやく切り替えることができます。最大化されたパネルでは、シェブロンボタンが下向きになり、パネルを元のサイズに戻します。

Maximize Panel Size button in the upper right of the Panel region

表示: 最大化されたパネルの切り替え コマンドを使用して、パネル領域を最大化することもできます。

注: パネル領域全体の表示をカスタマイズするだけでなく、個々のパネルには独自のレイアウトカスタマイズがある場合があります。たとえば、ターミナルでは複数のタブを開いたり、既存のターミナルを分割したりできます。

ビューとパネルのドラッグ＆ドロップ

VS Code には、プライマリサイドバーとパネル領域にビューとパネルの既定のレイアウトがありますが、これらの領域間でビューとパネルをドラッグ＆ドロップできます。たとえば、ソース管理ビューをパネル領域にドラッグ＆ドロップしたり、問題パネルをプライマリサイドバーに配置したりできます。

The Source Control view in the Panel region and Problem panel in the Primary Side bar

注: 場所のリセット コンテキストメニュー項目、または汎用的な 表示: ビューの場所をリセット コマンドを使用して、ビューとパネルを既定の場所に戻すことができることを覚えておいてください。

既存のビューまたはパネルにビューとパネルを追加して、グループを作成することもできます。たとえば、出力パネルをエクスプローラーのアクティビティバー項目にドラッグしてビューにドロップすることで、エクスプローラービューグループに移動できます。

Output panel moved to the Explorer view group

ビューとパネルの移動にマウスの使用に限定されません。表示: ビューの移動 および 表示: 選択したビューの移動 コマンドを使用してキーボードでレイアウトをカスタマイズすることもできます。ドロップダウンでは、移動する UI 要素と移動先 (サイドバーやパネル領域などの場所、またはグループを作成するための既存のビューやパネル) を選択できます。

ツールバー

ほとんどの VS Code のビューとパネルには、UI の右上部にツールバーが表示されます。たとえば、検索ビューには、更新、検索結果をクリア などのアクションを含むツールバーがあります。

ツールバーの項目を非表示にする

ツールバーが煩雑で、あまり使用しないアクションを非表示にしたい場合は、任意のアクションを右クリックして 非表示 コマンド (例: 「検索結果をクリア」を非表示) を選択するか、ドロップダウンから任意のアクションのチェックを外すことができます。非表示になったアクションは ... その他のアクション メニューに移動し、そこから呼び出すことができます。

ツールバーにアクションを復元するには、ツールバーボタン領域を右クリックし、メニューのリセット コマンドを選択するか、非表示のアクションを再度チェックします。VS Code のすべてのメニューを復元するには、コマンドパレットから 表示: すべてのメニューをリセット を実行します (⇧⌘P (Windows、Linux Ctrl+Shift+P))。

エディター

ワークベンチのユーザーインターフェースとは独立して、VS Code のエディター領域のレイアウトをカスタマイズできます。既定では、エディター領域にはミニマップ、ブレッドクラム、エディタータブなどの便利な機能が表示され、スティッキースクロールなどのオプションの UI も備わっています。エディター自体のレイアウトを調整したり、フローティングウィンドウに移動したりすることもできます。

ミニマップとブレッドクラム

表示 > 外観メニューには、エディター領域をカスタマイズするためのセクションがあります。そこには、次の切り替えオプションがあります。

ミニマップ - 現在のファイルの視覚的な概要。表示: ミニマップの切り替え。
ブレッドクラム - アクティブなファイルのフォルダー、ファイル、現在のシンボル情報を表示します。表示: ブレッドクラムの切り替え。
スティッキースクロール - アクティブなファイルでネストされたシンボルスコープを表示します。表示: スティッキースクロールの切り替え。

エディターグループ

既定では、開いている各エディターは同じ エディターグループ に入り、右側に新しいエディタータブを追加します。類似または関連するファイルをグループ化したり、同じファイルの並べて編集を可能にするために、新しいエディターグループを作成できます。エディターを横にドラッグするか、コンテキストメニューの分割コマンドのいずれかを使用して、現在のエディターを新しいエディターグループに左、右、上、または下に複製することで、新しいエディターグループを作成します。

Split editor commands in the editor tab context menu

分割エディターコマンドは、表示 > エディターのレイアウト メニューおよびコマンドパレットからも利用できます。

縦横のエディターグループレイアウトをすばやく切り替えたい場合は、縦/横エディターレイアウトの切り替え コマンド (⌥⌘0 (Windows、Linux Shift+Alt+0)) を使用できます。

グループ内で分割

表示: グループ内でエディターを分割 コマンド (⌘K ⇧⌘\ (Windows、Linux Ctrl+K Ctrl+Shift+\)) を使用して、同じグループ内でエディターを分割し、並べて編集することもできます。

グループ内で分割機能を使用する場合、このモードの切り替えと、2つの分割されたエディター間を移動するための特定のコマンドがあります。

表示: グループ内でエディターを分割 - 現在のエディターを分割します。
表示: グループ内でエディター分割を切り替える - アクティブなエディターの分割モードを切り替えます。
表示: グループ内のエディターを結合 - アクティブなファイルを単一のエディターに戻します。
表示: グループ内の分割エディターのレイアウトを切り替える - 水平レイアウトと垂直レイアウトを切り替えます。

両側の間を移動するには

表示: アクティブなエディターで最初の側にフォーカス - 分割エディターの最初の側 (左または上) にフォーカスを移動します。
表示: アクティブなエディターで2番目の側にフォーカス - 2番目の側 (右または下) にフォーカスを移動します。
表示: アクティブなエディターで反対側にフォーカス - 分割エディターの側面を切り替えます。

ワークベンチ > エディター: グループ内分割レイアウト (workbench.editor.splitInGroupLayout) の設定を使用すると、優先する分割エディターのレイアウトを水平 (既定) または垂直に設定できます。

グリッドレイアウト

エディターグループのレイアウトをより詳細に制御したい場合は、グリッドレイアウトを使用できます。これにより、複数の行と列のエディターグループを表示できます。表示 > エディターのレイアウト メニューには、さまざまなエディターレイアウトオプション (例: 2列、3列、グリッド (2x2)) がリストされており、セパレーターを掴んで移動することでグループのサイズを調整できます。

Editor Grid 2x2 layout with the sash highlighted

フローティングウィンドウ

エディター、ターミナル、または特定のビューをフローティングウィンドウで開くことができます。これは、エディターを別のモニターに移動したり、同じモニター上の別の場所に移動したりできるマルチモニター設定で役立ちます。

エディターをフローティングウィンドウで開くには、メインウィンドウからドラッグし、現在の VS Code ウィンドウの外側の任意の場所にドロップします。

フローティングウィンドウは、グリッドレイアウトで好きなだけエディターを開くことができます。ウィンドウは再起動後に元の場所に復元され、その中のすべてのエディターが再び開きます。

エディターを切り離す別の方法は、エディタータブを右クリックし、新しいウィンドウに移動 (workbench.action.moveEditorToNewWindow) または 新しいウィンドウにコピー (⌘K O (Windows、Linux Ctrl+K O)) オプションを選択することです。

Floating windows from editor tab menu

エディターグループ全体を移動するには、エディターグループを新しいウィンドウに移動 () または エディターグループを新しいウィンドウにコピー () コマンドを使用します。

コンパクトモード

フローティングウィンドウから不要な UI 要素を削除してコンテンツのスペースを増やすには、フローティングウィンドウのタイトルバーで コンパクトモードを設定 オプションを選択します。再度選択すると、フローティングウィンドウが元のモードに戻ります。

Floating window title bar with Compact Mode option highlighted

常に手前に表示

フローティングウィンドウのタイトルバーで 常に手前に表示を設定 オプションを選択すると、フローティングウィンドウを画面の最上部にピン留めできます。これは、メインの VS Code ウィンドウで作業中にターミナルやプレビューウィンドウを常に表示しておくのに役立ちます。再度選択すると、フローティングウィンドウのピン留めが解除されます。

Floating window title bar with Always on Top option highlighted

ピン留めされたタブ

エディタータブを常に表示したい場合は、エディタータブバーにピン留めできます。コンテキストメニューから、または 表示: エディターをピン留め コマンド (⌘K ⇧Enter (Windows、Linux Ctrl+K Shift+Enter)) を使用して、エディタータブをピン留めできます。

Pinned editor tab with pin button highlighted

ピン留めされたタブは、重要なファイルにアクセスするのに役立ちます。

ピン留めされたタブは、ピン留めされていないタブよりも常に最初に表示されます。
多数のタブが開いていても、表示範囲外にスクロールすることはありません。
その他を閉じる や すべて閉じる などのエディタータブコマンドを使用しても閉じません。
開いているエディターの制限を超えても閉じません。

ピンアイコンをクリックするか、ピン解除 エディタータブのコンテキストメニュー項目を使用するか、表示: エディターのピン解除 コマンドを使用して、エディターのピン留めを解除します。

ワークベンチ > エディター: ピン留めされたタブのサイズ (workbench.editor.pinnedTabSizing) 設定で、ピン留めされたエディターの表示方法を選択できます。オプションは次のとおりです。

normal: ピン留めされたタブは、他のタブの外観を継承します (既定)。
shrink: ピン留めされたタブは、エディターラベルの一部を表示する固定サイズに縮小します。
compact: ピン留めされたタブは、アイコンまたはエディターラベルの最初の文字としてのみ表示されます。

ワークベンチ > エディター: ピン留めされたタブを別の行に表示 を設定することで、通常のエディタータブバーの上に別の行でピン留めされたエディタータブを表示することもできます。2つの行の間でタブをドラッグ＆ドロップすることで、エディターをピン留めしたり、ピン解除したりできます。

ロックされたエディターグループ

複数のエディターを使用する場合、常に表示しておきたいエディターが1つ以上あることがよくあります。エディターグループ全体がロックされ表示される「ロックされたエディターグループ」機能は、安定した表示を提供し、新しいエディターを開くリクエストは別のグループに作成されます。エディターグループがロックされているかどうかは、エディターグループツールバーのロックアイコンで確認できます。

Locked editor group with lock icon highlighted

エディターツールバーの その他のアクション ... ドロップダウンから グループをロック を選択するか、表示: エディターグループをロック コマンドを実行することで、エディターグループをロックできます。

Lock Group command in the editor tool bar More Actions dropdown

ロックアイコンをクリックするか、表示: エディターグループのロックを解除 コマンドを実行することで、エディターグループのロックを解除できます。

ロックされたグループは、ロック解除されたグループとは異なる動作をします。

新しいエディターは、明示的に移動されない限り (たとえば、ドラッグアンドドロップによる)、ロックされたグループでは開きません。
新しいエディターがロックされたグループをスキップする場合、それは最も最近使用されたロック解除されたグループで開かれるか、ロックされたグループの隣に新しいグループを作成します。
エディターグループのロック状態は、再起動後も保持され、復元されます。
空のグループもロックできるため、より安定したエディターレイアウトが可能になります。

主なユースケースは、エディター領域内のターミナルです。たとえば、左側でテキストを編集し、右側に常に表示されるターミナルを配置したい場合があります。ターミナルエディターが作成され、横に移動されると、自動的にロックされます。これは、右側のターミナルがフォーカスされている場合でも、最初に手動でフォーカスを変更することなく、ファイルを左側で開くことを意味します。

グループの自動ロックは、workbench.editor.autoLockGroups 設定を使用して構成できます。これは既定ではターミナルエディターのみですが、同じ動作を得るために任意のエディタータイプを追加できます。

Auto Lock Groups setting with Terminal checked in the Settings editor

エディターグループのロックに関連するコマンド

表示: エディターグループをロック - アクティブなエディターグループをロックします。
表示: エディターグループのロックを解除 - アクティブなロックされたエディターグループのロックを解除します。
表示: エディターグループロックの切り替え - アクティブなエディターグループをロックまたはロック解除します。

これらのコマンドを使用するには、複数のエディターグループが必要です。

次のステップ

さらに読む

Visual Studio Codeのユーザーインターフェース - VS Codeの簡単な操作方法。
基本的な編集 - 強力な VS Code エディターについて学習します。
コードナビゲーション - ソースコード内をすばやく移動します。

07/09/2025