カスタムレイアウト

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 チャットビューを示しています。

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) を押します）
表示 > 外観 > セカンダリサイドバーメニュー項目を使用します

いつでも、ビューとパネルをプライマリサイドバーまたはセカンダリサイドバーにドラッグアンドドロップできます。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

パネル

パネル領域には、問題、ターミナル、出力パネルなどの 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 タイトルバーには、メイン 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 には、プライマリサイドバーとパネル領域にビューとパネルの既定のレイアウトがありますが、これらの領域間でビューとパネルをドラッグアンドドロップできます。たとえば、ソース管理ビューをパネル領域にドラッグアンドドロップしたり、問題パネルをプライマリサイドバーに配置したりできます。

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

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

ピン留めされたタブ

エディタータブを常に表示したい場合は、エディタータブバーにピン留めできます。コンテキストメニューから、または 表示: エディターをピン留め コマンド (⌘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 エディターについて学びます。
コードナビゲーション - ソースコードをすばやく移動します。

04/03/2025