外観
このページを使用して、IDE の全体的な外観を変更します。
オプション | 説明 |
|---|---|
テーマ | リストから UI テーマを選択します。デフォルトでは、明るいテーマ、暗いテーマ、ハイコントラストのテーマから選択できます。他のテーマをプラグインとしてインストールできます。詳細については、ユーザーインターフェースのテーマを参照してください。 |
ツールウィンドウの背景が異なる （島々テーマのみ対応） | 島々テーマでエディターのフォーカスを向上させるには、ツールウィンドウの背景が異なるを選択してください。これにより、ツールウィンドウの色調が、ダークテーマではより明るく、ライトテーマではより暗くなります。 |
OS と同期 | 現在のシステム設定を検出し、それに応じてダークテーマまたはライトテーマを使用します。 |
エディターのカラースキーム | さまざまなテキストリソースの色、フォント、構文のハイライトを定義する配色を選択します。 現在のテーマのデフォルトの配色がリストに表示されます。 |
をクリックして、設定が OS と同期されるときに適用されるアクセシビリティ
オプション | 説明 |
|---|---|
ズーム | IDE 全体を拡大または縮小して、すべての UI 要素のサイズを一度に拡大または縮小します。 メインメニューからこの設定にアクセスすることもできます: を選択します。 |
カスタムフォントの使用 | 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) メインメニューは、ファイル、編集、表示、その他のメニューを備えたアプリケーションウィンドウの標準メニューバーです。 メインメニューの表示方法を選択します。
|
項目切り替え用のポップアップを開いたたまにする | この機能を有効にすると、オプションを有効または無効にしている間、メニューは開いたままになります。フォーカスを別の UI 要素に切り替えるか、Escape を押すと、メニューは閉じます。 |
背景画像 | IDE のカスタム背景イメージを構成します。 |
ツリービュー
項目 | 説明 |
|---|---|
インデントガイドを表示する | ツリービュー（たとえば、プロジェクトツールウィンドウ（Alt+1））に、インデントレベルを示す垂直線を表示します。これらの線は、プロジェクト内のコンポーネントの階層構造をより分かりやすく理解できます。  |
小さめのインデントを使用する | ツリービュー内のツールウィンドウの境界線とテキスト間のスペースを減らします。たとえば、プロジェクトツールウィンドウ (Alt+1) の場合です。 |
ツールウィンドウ
項目 | 説明 |
|---|---|
ツールウィンドウバーを表示する | メインウィンドウの端の周囲にツールウィンドウバーを表示します。詳細については、ツールウィンドウバーとボタンを参照してください。 |
ツールウィンドウ名を表示する | ツールウィンドウバーにツールウィンドウ名を表示します。 |
ワイドスクリーンのツールウィンドウレイアウト | ワイドスクリーンディスプレイ用にツールウィンドウのレイアウトを最適化します。水平ツールウィンドウの幅を制限することで、垂直ツールウィンドウの高さを最大化します。詳細については、ワイドスクリーンモニター用に最適化を参照してください。 |
左側で横並びレイアウトを有効にする | 左側の上端と下端に取り付けられたツールウィンドウを 2 列で表示します。詳細については、ワイドスクリーンモニター用に最適化を参照してください。 |
右側で横並びレイアウトを有効にする | 右側の上下端に取り付けられたツールウィンドウを 2 列で表示します。詳細については、ワイドスクリーンモニター用に最適化を参照してください。 |
各ツールウィンドウのサイズを記憶する | ツールウィンドウを再度開いたり切り替えたりするときに、各ツールウィンドウの個々の幅を覚えておいてください。 このオプションを無効にすると、ツールウィンドウの既定の幅は統一され、ウィンドウを切り替えてもサイズは一定のままになります。 |
プレゼンテーションモード
項目 | 説明 |
|---|---|
ズーム | プレゼンテーションモードで IDE 全体を拡大または縮小します。 |
アンチエイリアス
オプション | 説明 |
|---|---|
IDE | IDE に適用するアンチエイリアシングモードを選択します (メニュー、ツールウィンドウなどを含む)。
|
エディター | どのアンチエイリアシングモードをエディターに適用するかを選択します。
|
関連ページ：
ユーザーインターフェースのテーマ
インターフェーステーマは、ウィンドウ、ダイアログ、ボタン、ユーザーインターフェースのすべての視覚要素の外観を定義します。デフォルトでは、最初の実行時に変更しない限り、WebStorm はダークテーマを使用します。UI テーマを変更する設定ダイアログで、外観 & 振る舞い | 外観を選択します。あるいは、を押して切り替えリストからテーマを選択します。テーマリストから UI テーマを選択します。アイランドダーク: デフォルトのダークテーマで、UI セクションが明確に分離されています。アイランズライ...
カラースキーム: エディター内のフォントと色
開発者は、エディターのソースコード、検索結果、デバッガー情報、コンソールの入出力など、多くのテキストリソースを操作します。このテキストのフォーマットには色とフォントスタイルが使用されており、一目で理解できるようになります。WebStorm では、IDE テキストで使用される色とフォントを定義する構成可能な配色から選択できます。事前定義された配色を使用するか、あなたの好みに合わせてカスタマイズすることができます。スキームを共有することも可能です。配色を選択を押して設定を開き、を選択します。あるいは...
カラースキームの切り替え
このセクションを使用して、WebStorm エディターの配色を選択します。スキームワークスペースで使用する配色を選択してください。このボタンをクリックすると、次のコマンドが呼び出されます（選択したスキームに応じて）。複製: 現在選択されているカラー設定を新しいスキームとして保存します。新しいスキームを保存するにはを押し、操作をキャンセルするにはを押します。デフォルトの復元: 選択したカラースキームを WebStorm に同梱されている初期デフォルトにリセットします。定義済みのカラースキームを...
アクセシビリティ
WebStorm を使用すると、さまざまなユーザー補助機能を使用してニーズに合わせることができます。スクリーンリーダーを使用したり、フォントサイズ、色、特定の UI 要素の動作を調整して、WebStorm で作業するプロセスを簡単にすることができます。スクリーンリーダーを設定する：現在、WebStorm は Windows のスクリーンリーダーを完全にサポートしています。スクリーンリーダーを有効にするお好みのスクリーンリーダーをダウンロードして有効にします。NVDA: WebStorm などの...
メニューおよびツールバー
IDE を操作するとき、いくつかのアクションを他のアクションより頻繁に実行します。生産性を最大化するには、お気に入りのアクションのデフォルトのショートカットを学ぶか、それらにショートカットを割り当てます。メニューとツールバーをカスタマイズして、必要なアクションのみを含め、再グループ化し、アイコンを構成することもできます。メニューとツールバーのカスタマイズを押して設定を開き、を選択します。使用可能なメニューとツールバーのリストで、カスタマイズするノードを展開し、目的の項目を選択します。選択した項目...
背景画像
WebStorm のエディターおよびすべてのツールウィンドウのカスタム背景として任意の画像を設定できます。プロジェクトを開いている場合、画像の構成が可能です。カスタム背景画像を構成する WebStorm でプロジェクトを開きます。を押して設定を開き、を選択します。背景画像ボタンをクリックしてください。背景画像ダイアログで、背景として使用する画像を指定し、OK をクリックして変更を適用します。オプションの詳細については、「背景画像の設定」を参照してください。背景画像の設定：背景画像ダイアログには、次...