CSS のコーディング支援

構文ハイライト

ReSharper は、セレクター、プロパティ、プロパティの値、アットルール (@import や @media など)、プロパティ値として使用できる関数、疑似クラスなどをハイライトします。 CSS のデフォルトの構文ハイライト:

ReSharper でサポートされているすべてのファイルタイプに共通の標準構文ハイライトに加えて、CSS ファイルの特別な機能もいくつか用意されています。 どの色の値にもそれぞれの色で下線が引かれていますが、色の定義方法（色名、16 進コード、RGB コード）は関係ありません。

色の値にカーソルを合わせると、ツールチップが表示されます。 色が CSS（CSS および HTML）仕様で定義されている場合はアイコンの近くに色名が表示されます。そうでない場合は、その色の値に対応した hex コードと RGB コードがツールチップに表示されます。

色の定義と 色を選択する ダイアログの詳細については、 カラーアシスタンス を参照してください。

コード補完

ReSharper は CSS ファイルと CSS が使用できる他のファイルタイプで独自の IntelliSense を提供します。 HTML 5 で導入されたものも含め、HTML タグ名の完成に役立ちます。

実際、ReSharper コード補完は、セレクタを指定するときに複数のシナリオで役立ちます。 例: コロンの後に利用可能な擬似クラスのリストを提供します。

確かに、ReSharper コード補完は利用可能なプロパティを提案しています ...

... とプロパティ値:

さらに、ReSharper は class 属性の値の中でコード補完を呼び出すときに使用可能なクラスを提案しています ...

... および HTML または ASP.NET マークアップファイルの id 属性内に使用可能な ID:

コンテキストアクションの例

ReSharper は CSS コードをターゲットとする一連の コンテキストアクションを提供します。 これらのアクションの完全なリストは、ReSharper オプション の コード編集 | CSS | コンテキストアクションページで確認できます。 必要に応じて、このページを使用して一部のアクションを無効にすることもできます。

現在のキャレット位置でコンテキストアクションが利用可能になると、ReSharper は対応する アクションインジケーター をキャレットの左側に表示します。 ただし、ReSharper が現在のキャレット位置で複数のコンテキスト関連の機能を提供する場合もあります。 この場合、最も優先度が高いアクションに対応するアクションインジケーターが表示され、他のすべてのアクションはアクションインジケーターをクリックするか Alt+Enter を押して アクションリストを展開したときにのみ表示されます。コンテキストアクションは優先度が最も低いため、アクションリストの下部に表示されることが多いです。

CSS のコンテキストアクションの例を次に示します。

色を定義または変更するには、次のコンテキストアクションを適用します。 色を選択する ダイアログが表示され、必要な色を選択できます。

クイックドキュメント

テキストエディターまたは ファイル構造 ウィンドウからクイックドキュメントを呼び出すことができます。

追加情報が必要な場合は、詳細を 続きを読む」 をクリックして仕様に直接移動します。

コードを再配置

CSS ファイルでは コードの再配置機能がサポートされているため、CSS コードの要素と論理ブロックをすばやく再配置できます。