スタイルシート

• スタイルシートシンボルの使用箇所を見つけるには、キャレットをその位置に置き、Alt+F7 を押します。プロジェクトの使用箇所を検索するから詳細を参照してください。

• スタイルシートシンボルの使用箇所からその定義に移動するには、Ctrl+B を押します。定義へのナビゲーションは、変数やミックスインだけでなく、クラス、ID、セレクター (ネストされたセレクターやアンパサンド & を含むセレクターを含む) に対しても利用できます。

  宣言に移動の詳細を参照してください。

プロパティのドキュメントを表示

• プロパティにキャレットを置き、Ctrl+Q を押すか、メインメニューから表示 | クイックドキュメントルックアップを選択します。

• プロパティの上にマウスを移動すると、WebStorm はすぐにその参照をドキュメントポップアップに表示します。

  この動作をオフにすることも、ポップアップの表示を速くまたは遅くするように設定することもできます。以下のドキュメントポップアップの動作の構成を参照してください。

ドキュメントポップアップの動作を構成する

• コードシンボルの上にマウスを移動したときにドキュメントの自動的な表示をオフにするには、ポップアップで をクリックし、マウス移動時に表示するオプションを無効にします。

• ドキュメントポップアップを速くまたは遅く表示するには、設定ダイアログ（Ctrl+Alt+S）を開き、エディター | 一般 | コード補完に移動してから、ドキュメントのポップアップを表示するチェックボックスを選択して遅延時間を指定します。

ブラウザーで MDN ドキュメントを開く

• ドキュメントポップアップ Ctrl+Q で、下部のリンクをクリックします。

• Shift+F1 を押すか、メインメニューから表示 | 外部ドキュメントを選択します。

• スタイルシート言語のフォーマットを構成するには、設定ダイアログ（Ctrl+Alt+S）を開き、エディター | コードスタイル | スタイルシート | <あなたのスタイルシートの言語> に移動して、タブとインデント、スペース、中括弧と中括弧、ハードマージンとソフトマージンなどの言語固有の設定を構成します。

  設定を変更すると、プレビュー領域に変更が書式にどのように影響するかが表示されます。

• CSS、SCSS、Less コンテキストでは、WebStorm はデフォルトで、import ステートメントおよび URL で生成された文字列リテラルに二重引用符を使用します。単一引用符を使用するには、「その他」タブを開き、「引用符」リストから「単一」を選択します。

  再フォーマット後に選択したスタイルをファイル全体に適用するには、リストの整形時に強制するチェックボックスを選択します。

• コードフラグメントを再フォーマットするには、エディターでそれを選択して Ctrl+Alt+L を押します。

• ファイルまたはフォルダーを再フォーマットするには、プロジェクトツールウィンドウ Alt+1 でファイルまたはフォルダーを選択し、Ctrl+Alt+L を押します。詳細についてはコードの再フォーマットと再配置を参照してください。

• あるいは、Prettier (Ctrl+Alt+Shift+P) を使用することもできます。

変数の導入

1. エディターで、変数に変換する式にキャレットを置き、Ctrl+Alt+V を押すか、コンテキストメニューまたはメインメニューからリファクタリング | 紹介する | 変数の導入を選択します。

2. 選択した式が複数出現する場合は、複数の出現箇所が見つかりましたリストからこの出現箇所だけを置換または出現箇所をすべて置換を選択してください。

3. .scss および .sass の場合、変数のグローバルスコープまたはローカルスコープを選択します。

4. 赤い枠の付いたフィールドで、提案された変数名をそのまま使用するか、カスタム名を指定します。準備ができたら Enter を押します。

ルールセットを導入する

1. 導入する宣言を選択します。宣言が 1 つだけ必要な場合は、宣言の中にキャレットを置くだけです。

2. Alt+Enter を押し、リストからルールセットを導入を選択します。

WebStorm は、同じセレクターを使用して新しいルールセットを作成し、それに選択された宣言を移動します。選択範囲にコメント、ネストしたセレクタなどが含まれている場合、それらも新しいルールセットに移動されます。

ルールセットを他のファイルに移動する

1. ルールセット内の移動する任意の場所にキャレットを置き、F6 を押します。

2. 表示されたダイアログで、ルールセットを移動するファイルを指定します。指定されたファイルが存在しない場合、WebStorm はそれを作成することを提案します。

3. デフォルトでは、WebStorm はルールセットが移動されるファイルを自動的に開きます。この動作を変更するには、エディターで開くチェックボックスをオフにします。

互換性チェックをオンにする

1. 設定ダイアログ（Ctrl+Alt+S）で、エディター | インスペクションに移動します。

2. CSS ノードを展開してプロパティは選択されたブラウザーと互換性がありませんを選択します。オプションエリアで、ターゲットにするブラウザーとその最小バージョンを選択します。

3. オプション領域で、プロパティの可用性を確認するブラウザーを選択します。選択したブラウザーのターゲットバージョンを指定します。

色を指定する

• キャレットを color プロパティに置き、Ctrl+Space を押して、目的の色の値を選択するか、色の選択 ... を押してカスタムの色の値を選択します。

  

• 人間が判読できる色名の代わりにコードを使用するには、Alt+Enter を押して、リストからカラーを <カラーコードシステムに変換> を選択します。ここで、<color code system> は HEX(英語)、HSL(英語)、HWB(英語)、RGB(英語)、lch、oklch、または oklab です。

  

色の変更

• ガター内のカラーアイコンをクリックし、ポップアップで目的の色を選択します。

  

• または、キャレットを色のプロパティに置き、Alt+Enter を押して、リストから色の変更を選択し、ポップアップで目的の色を選択します。

  

カラープレビューを切り替える

WebStorm は絶対色、相対色、混合色のプレビューを表示します。

• デフォルトでは、WebStorm はカラープレビューをガター内のアイコンとして表示します。背景にカラープレビューを表示するには、設定ダイアログ（Ctrl+Alt+S）を開き、エディター | 外観に移動して CSS 色プレビューを背景として表示するチェックボックスをオンにします。

  

• カラープレビューガターアイコンを復元するには、設定ダイアログ (Ctrl+Alt+S) を開き、エディター | 一般 | ガターアイコンに移動して、共通領域の色プレビューチェックボックスを選択します。

  

• タグのコンテキストメニューからタグに適用されるスタイルを表示を選択します。

  WebStorm は 2 つのペインで CSS スタイルツールウィンドウを開きます。左側のペインはタグのスタイルを示し、右側のペインはそれらの定義を示します。タグごとに、WebStorm は別々のタブを開きます。

  ツールウィンドウから、ソースコード内のタグとプロパティの定義に移動できます。

  • タグに移動するには、左側のペインのツールバーの をクリックします。

  • プロパティの定義に移動するには、左側のペインでそれを選択し、右側のペインのツールバーの をクリックします。

1. 設定ダイアログ（Ctrl+Alt+S）で、エディター | カラースキームの切り替え | CSS に移動します。

2. 配色を選択するか、デフォルトから継承されたハイライト設定を受け入れるか、色とフォントの説明に従ってカスタマイズします。