WebStorm 2026.1 Help

外観

このページを使用して、IDE の全体的な外観と雰囲気を変更します。

設定 | Appearance & Behavior | Appearance

オプション

説明

テーマ

リストから UI テーマを選択します。 デフォルトでは、明るいテーマ、暗いテーマ、ハイコントラストのテーマから選択できます。 他のテーマをプラグインとしてインストールできます。 詳細は、 ユーザーインターフェースのテーマ を参照してください。

異なるツールウィンドウの背景

島々 テーマのみ対応)

島々 テーマでエディターのフォーカスを向上させるには、 異なるツールウィンドウの背景 を選択してください。 これにより、ツールウィンドウの色調が、ダークテーマではより明るく、ライトテーマではより暗くなります。

OS と同期

現在のシステム設定を検出し、それに応じてダークまたはライトのテーマを使用します。

設定ボタン をクリックして、設定が OS と同期されるときに適用される 配色ユーザーインターフェーステーマを選択します。

エディターのカラースキーム

さまざまなテキストリソースの色、フォント、構文のハイライトを定義する 配色を選択します。

現在のテーマのデフォルトのカラースキームがリストに表示されます。

設定ボタン をクリックすると、 カラースキーム設定に移動したり、スキームをファイルにエクスポートしたり、カラースキームをインポートしたりできます。

アクセシビリティ

オプション

説明

ズーム

IDE 全体を拡大または縮小し、すべての UI 要素のサイズを一度に増減させます。

メインメニューからこの設定にアクセスすることもできます: ビュー | 外観 | IDE をズーム を選択します。

カスタムフォントの使用

WebStorm UI で使用するカスタムフォントファミリとサイズを指定します。

スクリーンリーダーに対応する

WebStorm のスクリーンリーダーサポートを有効にします。 詳細は、 アクセシビリティ を参照してください。

コントラストスクロールバーを使用する

エディターの スクロールバーをより見やすくします。

赤緑色覚異常用に色を調整する

UI の色を調整して、色覚多様性や重度の場合の色をよりよく知覚します。

簡素化されたスプラッシュスクリーンを使用する

簡素化されたスプラッシュスクリーンは、標準の起動イメージの代わりを提供し、光過敏症や感覚嗜好を持つユーザーにとって明るい色や複雑なグラフィックなどの視覚的なトリガーを最小限に抑えます。

UI オプション

オプション

説明

コンパクトモード

このモードでは、IDE のツールバーとツールウィンドウのヘッダーの高さが縮小され、間隔とパディングが縮小され、アイコンとボタンが小さくなります。 このモードは、小さい画面に適しています。

ウィンドウヘッダーに常にフルパスを表示する

プロジェクトと現在のファイルへのフルパスをメインウィンドウのヘッダーに表示します。 無効にすると、ヘッダーにはプロジェクトとファイルの名前のみが表示されます。

メインツールバーでプロジェクトカラーを使用する

色付きのヘッダーを使用すると、開いている複数のプロジェクト間のナビゲーションが簡単になります。 詳細は、 ツールバーの色の設定 を参照してください。

Alt キーを押している時のみドラッグアンドドロップ可能

ファイル、エディタータブ、ツールウィンドウボタン、その他の UI コンポーネントを誤って移動しないようにします。 有効になっている場合は、 Alt キーを押したまま移動します。

デフォルトではこのオプションは無効になっており、追加のキーなしですべて移動できます。

スムーズスクロール

UI を行ごとではなくピクセルごとにスムーズにスクロールします。

これにより、Windows および Linux ではデフォルトでアニメーション付きのスムーズスクロールも有効になります。 精密スクロールを使用するには、それを無効化します: Ctrl+Shift+A を押し、 スムーズスクロールオプション ダイアログを開き、 アニメーション付きスムーズスクロール チェックボックスを無効にしてください。

スムーズスクロールオプションダイアログ

このダイアログでは、スクロールアニメーションの継続時間を設定し、 https://cubic-bezier.com/#.17,.67,.83,.67 に基づいてアニメーションの外観を変更することもできます。

コントロールでミネモニクスを有効化する

ダイアログでコントロールを使用するために押すことができるホットキーに下線を引きます。

メニューでミネモニクスを有効化する

メニュー操作を実行するために押すことができるホットキーに下線を引きます。

メニュー項目にアイコンを表示する

メインメニューとコンテキストメニューの項目の左側にアイコンを表示します。

メインメニュー

(Windows および Linux)

メインメニューは、 ファイル編集ビュー 、その他のメニューを備えたアプリケーションウィンドウの標準メニューバーです。

メインメニューの表示方法を選択します。

  • ハンバーガーボタンの下に非表示にする: メインメニューをツールバー上の 1 つのアイコンに折りたたみます。

  • メインツールバーと統合する: メインメニューと IDE ウィンドウヘッダーを同じバーに表示します。

  • メインツールバーの上に表示する: メインメニューを別のツールバーとして表示します。

項目切り替え用のポップアップを開いたたまにする

この機能を有効にすると、オプションを有効または無効にしている間、メニューは開いたままになります。 フォーカスを別の UI 要素に切り替えるか、 Escape を押すと、メニューは閉じます。

背景画像…

IDE の カスタム背景イメージを構成します。

ツリービュー

項目

説明

インデントガイドを表示する

ツリービュー(たとえば、 プロジェクト ツールウィンドウ(Alt+1 ))に、インデントレベルを示す垂直線を表示します。 これらの線は、project 内のコンポーネントの階層構造をより分かりやすく理解するのに役立ちます。

ツールウィンドウのツリーインデントガイド

小さめのインデントを使用する

ツールウィンドウの境界とツリービュー内のテキストとの間のスペースを減らします。例えば、 プロジェクト ツールウィンドウ(Alt+1 )の場合です。

ツールウィンドウ

項目

説明

ツールウィンドウバーの表示

メインウィンドウの端の周囲にツールウィンドウバーを表示します。 詳細は、 ツールウィンドウバーとボタン を参照してください。

ツールウィンドウ名を表示する

ツールウィンドウバーにツールウィンドウ名を表示します。

ワイドスクリーン ツールウィンドウレイアウト

ワイドスクリーンディスプレイ向けにツールウィンドウのレイアウトを最適化します。縦方向のツールウィンドウの幅を制限することで横方向のツールウィンドウの高さを最大化します。 詳細は、 ワイドスクリーンモニター用に最適化 を参照してください。

左側の並列レイアウト

左側の上端と下端に取り付けられたツールウィンドウを 2 列で表示します。 詳細は、 ワイドスクリーンモニター用に最適化 を参照してください。

右側の並列レイアウト

右側の上下端に取り付けられたツールウィンドウを 2 列で表示します。 詳細は、 ワイドスクリーンモニター用に最適化 を参照してください。

各ツールウィンドウのサイズを記憶する

各ツールウィンドウを再度開いたり切り替えたりした時に、その幅を個別に記憶します。

このオプションを無効にすると、ツールウィンドウの既定の幅は統一され、切り替えてもサイズは一定のままになります。

プレゼンテーションモード

項目

説明

ズーム

プレゼンテーションモードで IDE 全体を拡大または縮小します。

アンチエイリアス

オプション

説明

IDE

IDE (メニュー、ツールウィンドウなどを含む) に適用するアンチエイリアシングモードを選択してください:

  • サブピクセル: このオプションは LCD ディスプレイに推奨されており、カラー LCD の各ピクセルが赤、緑、青のサブピクセルで構成されているという事実を利用しています。 これにより、テキストを滑らかにしてより詳細にレンダリングすることができます。

  • グレースケール: このオプションは、非 LCD ディスプレイまたは垂直に配置されたディスプレイに推奨されます。 ピクセルレベルのテキストを処理します。

  • アンチエイリアスなし: このオプションは、アンチエイリアス処理されていないフォントがより速くレンダリングされ、よりよく見える高解像度のディスプレイに使用できます。

エディター

エディターに適用するアンチエイリアシングモードを選択してください:

  • サブピクセル: このオプションは LCD ディスプレイに推奨されており、カラー LCD の各ピクセルが赤、緑、青のサブピクセルで構成されているという事実を利用しています。 これにより、テキストを滑らかにしてより詳細にレンダリングすることができます。

  • グレースケール: このオプションは、非 LCD ディスプレイまたは垂直に配置されたディスプレイに推奨されます。 ピクセルレベルのテキストを処理します。

  • アンチエイリアスなし: このオプションは、アンチエイリアス処理されていないフォントがより速くレンダリングされ、よりよく見える高解像度のディスプレイに使用できます。

2026 年 6 月 8 日