ReSharper 2026.1 Help

CSS のリファクタリング

CSS スタイルのリファクタリングを使用すると、CSS スタイルをスタイルシートと HTML ファイル間ですばやく移動したり、新しいスタイルシートをその場で作成してそこに既存のスタイルを移動したりできます。 数回クリックするだけで、CSS クラスとその使用箇所の名前を変更することもできます。

リファクタリングを実行する

  1. シンボルにキャレットを置き、リファクタリングするコードフラグメントを選択するか、ツールウィンドウ内の項目を選択します。

  2. 次のいずれかを実行します。

    • メインメニューから ReSharper | リファクタリング を選択し、目的のリファクタリングを選択します。 このメニューで使用できるリファクタリングのリストは、現在のコンテキストによって異なります。 ReSharper がコンテキストのリファクタリングを提案できない場合、メニュー全体が無効になります。

    • エディター、 ファイル構造ウィンドウ、またはその他の ReSharper ウィンドウで、変換したい項目を右クリックし、コンテキストメニューから リファクタリング を選択して、必要なリファクタリングを選びます。

    • メインメニューから ReSharper | リファクタリング | リファクタリング を選択するか、 Control+Shift+R を押して、適用可能なリファクタリングのリストを表示し、そのうちの 1 つを選択します。 選択項目のコンテキストメニューで リファクタリング を選択することもできます。

    • 特定のリファクタリングに割り当てられている デフォルトのキーボードショートカットを使用するか、お気に入りのリファクタリングコマンドに カスタムショートカットを割り当てます。

  3. 選択したリファクタリングにユーザー入力が必要な場合は、リファクタリングウィザードが開きます。 ウィザードのダイアログはモーダルではないため、ウィザードが開いている間にコードを編集できます。

    リファクタリングアクションをロールバックするために、ウィザードにはオプション 元に戻すを有効にするには、変更のあるすべてのファイルを編集用に開く が用意されています。 このオプションを選択すると、ReSharper は変更されたファイルをすべて新しいエディタータブで開き、リファクタリングのロールバックを有効化できます。 この場合、変更を自分で保存する必要があります。 このオプションが選択されていない場合、 ReSharper は変更された ファイルを開かずに自動的に保存します。

  4. リファクタリング操作によってコードの競合 (名前の重複、可視性の競合など) が発生する場合、ウィザードはリファクタリングを適用する前の最後のステップで競合のリストを表示します。 一部の競合については、ウィザードがクイックフィックスを提案することもできます。 詳細については、 リファクタリングの競合を解決する を参照してください。

一部のリファクタリングは、エディターでコードを変更した直後に使用できます。 詳細については、 インプレースリファクタリング を参照してください

スタイル抽出

このリファクタリングを使用すると、CSS ファイル内の別のルールセットまたは HTML の style 属性で定義された既存のルールから CSS ルールセットを作成できます。 このリファクタリングは、CSS ファイルの CSS ルールセットや HTML ファイルの style タグ、HTML ファイルの style 属性のどこにでも置くことができます。 開いている スタイル抽出 ダイアログでは、チェックボックスを使用して、抽出するスタイル宣言を指定します(オプションで、リファクタリングを呼び出す前に希望の宣言を選択できます)。 必要に応じて、新しいルールセットのセレクタを変更します。

新しいスタイルセットへの CSS スタイルの抽出

リファクタリングを適用した後、抽出されたルールセットは同じファイルに作成されます。 HTML style 属性からインラインスタイルのルールを抽出する場合、抽出されたルールセットは style タグに配置されます。 抽出したルールセットを別のファイルに配置したい場合は、後で 移動リファクタリングを使用してください。

移動

このリファクタリングでは、CSS ルールセットを別のファイルに移動できます。 このリファクタリングは、CSS ファイルの CSS ルールセットまたは HTML ファイルの style タグのどこにでもキャレットがある場合に呼び出すことができます。 開いている 移動 ダイアログで、ターゲットファイルを指定するか、新しい CSS ファイルの名前を入力し、 作成​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​‍​ 作成 をクリックします。 必要に応じて、 インポート指示を挿入する を選択して、ルールセットが移動されるファイルの URL を @import に追加します。

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

リファクタリングを終了するには、 次へ をクリックします。

専用のショートカット F6 を使用してこのリファクタリングを呼び出すこともできます。

名前変更

CSS でも利用可能な Rename リファクタリング は、リファクタリングをどこで呼び出すか、宣言や使用箇所、CSS ファイルやマークアップファイルで、クラスセレクタや ID セレクタの名前を変更することができます。

開いた 名前変更 ダイアログで、クラスまたは ID の新しい名前を指定し、 次へ をクリックします。 デフォルトで、ReSharper は名前が変更されたアイテムのすべての使用箇所を見つけ、リファクタリングウィザードの次のページに表示します。 必要に応じて、名前を変更したくない用途の横にあるチェックボックスをオフにすることができます。

専用のショートカット F2 を使用してこのリファクタリングを呼び出すこともできます。

2026 年 6 月 12 日