カスタムレイアウト

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

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

ワークベンチ

プライマリーサイドバー

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

プライマリーサイドバーの位置を変更するには、次の方法があります。

• アクティビティバーを右クリックし、[プライマリーサイドバーを右へ移動] を選択する
• [表示: プライマリーサイドバーの位置を切り替え] を実行して、プライマリーサイドバーを右と左に切り替える
• [表示] > [外観] > [プライマリーサイドバーを右へ移動] メニュー項目を使用する
• 設定エディターで Workbench > Side Bar: Location (workbench.sideBar.location) 設定を right に設定する

セカンダリーサイドバー

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

次の画像は、プライマリーサイドバーのエクスプローラービューとセカンダリーサイドバーのCopilotチャットビューを示しています。

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

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

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

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

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

コマンドパレットの位置

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

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

デフォルトでは、アクティビティバーはプライマリーサイドバーと共に移動し、ワークベンチの外側の端に留まります。アクティビティバーを非表示にしたり、プライマリーサイドバーの上部または下部に移動したりすることもできます。

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

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

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

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

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

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

• 全画面表示 - エディターがディスプレイ画面全体を埋めるように設定します。[表示: 全画面表示の切り替え] (⌃⌘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つのオプションがあります。

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

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

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

パネルサイズの最大化

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

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

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

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

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

注意: [場所をリセット] コンテキストメニュー項目を使用してビューとパネルをデフォルトの場所に戻したり、一般的な [表示: ビューの場所をリセット] コマンドですべてのビューとパネルをリセットできることを覚えておいてください。

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

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

ツールバー

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

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

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

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

エディター

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

ミニマップとパンくずリスト

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

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

エディターグループ

デフォルトでは、開かれた各エディターは同じエディターグループに入り、右側に新しいエディタータブが追加されます。類似または関連するファイルをグループ化したり、同じファイルの並列編集を可能にするために、新しいエディターグループを作成できます。

エディターを横にドラッグするか、エディタータブのコンテキストメニューにあるいずれかの [分割] コマンドを使用して、現在のエディターを左、右、上、または下に新しいエディターグループに複製することで、新しいエディターグループを作成します。

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

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

グループ内で分割

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

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

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

サイド間を移動するには:

• [表示: アクティブエディターの最初のサイドにフォーカス] - 分割エディターの最初 (左または上) のサイドにフォーカスを移動します。
• [表示: アクティブエディターの2番目のサイドにフォーカス] - 2番目 (右または下) のサイドにフォーカスを移動します。
• [表示: アクティブエディターの他のサイドにフォーカス] - 分割エディターのサイドを切り替えます。

Workbench > Editor: Split in Group Layout (workbench.editor.splitInGroupLayout) 設定により、優先する分割エディターのレイアウトを水平 (デフォルト) または垂直に設定できます。

グリッドレイアウト

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

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

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

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

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

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

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

コンパクトモード

フローティングウィンドウから不要なUI要素を削除してコンテンツのスペースを確保するには、フローティングウィンドウのタイトルバーにある [コンパクトモードに設定] オプションを選択します。もう一度選択すると、フローティングウィンドウが元のモードに復元されます。

最前面にピン留め

フローティングウィンドウのタイトルバーにある [常に最前面に設定] オプションを選択することで、フローティングウィンドウを画面の最前面にピン留めできます。これは、メインのVS Codeウィンドウで作業している間、ターミナルやプレビューウィンドウを常に表示しておくのに便利です。もう一度選択すると、フローティングウィンドウのピン留めが解除されます。

ピン留めされたタブ

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

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

• ピン留めされたタブは、ピン留めされていないタブの前に常に表示されます。
• 多くのタブを開いている場合でも、スクロールして見えなくなることはありません。
• [他を閉じる] や [すべて閉じる] などのエディタータブコマンドを使用しても閉じられません。
• 開いているエディターの上限を設定しても、それを超えても閉じられません。

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

Workbench > Editor: Pinned Tab Sizing (workbench.editor.pinnedTabSizing) 設定で、ピン留めされたエディターの表示方法を選択できます。オプションは次のとおりです。

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

Workbench > Editor: Pinned Tabs On Separate Row を設定することで、ピン留めされたエディタータブを通常のエディタータブバーの上の別の行に表示することもできます。2つの行の間でタブをドラッグアンドドロップすることで、エディターをピン留めしたり、ピン留めを解除したりできます。

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

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

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

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

ロックされたグループは、ロックされていないグループとは動作が異なります。

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

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

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

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

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

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

次のステップ

さらに読む

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