ReSharper 2019.2ヘルプ

CSSのコーディング支援

ReSharperのコーディング支援機能のほとんどは、CSSでもサポートされています。これらの機能の詳細については、コーディング支援の該当するトピックを参照してください。このセクションの主題では、フィーチャマトリックスを見つけて、CSSで正確にサポートされているものを確認することもできます。

このトピックでは、CSSのコーディング支援機能の使用例をいくつか見つけることができます。

構文の強調表示

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

ReSharper: Syntax highlighting in CSS
ReSharperでサポートされているすべてのファイルタイプに共通の標準構文強調表示に加えて、CSSファイルの特別な機能もいくつか用意されています。どの色の値にもそれぞれの色で下線が引かれていますが、色の定義方法(色名、16進コード、RGBコード)は関係ありません。
ReSharper: Syntax highlighting in CSS
マウスポインタを色の値の上に置くと、ツールチップが表示されます。色がCSS(CSSおよびHTML)仕様で定義されている色の1つである場合、色名はアイコンの近くに表示されます。それ以外の場合、アイコン、16進コード、RBGコードは対応する色値のツールチップに表示されます。

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

コード補完

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

ReSharper: Code completion in CSS
ReSharper: Code completion in CSS
実際、ReSharper コード補完は、セレクタを指定するときに複数のシナリオで役立ちます。例:コロンの後に利用可能な擬似クラスのリストを提供します。
ReSharper: Code completion in CSS
確かに、ReSharper コード補完は利用可能なプロパティーを提案しています...
ReSharper: Code completion in CSS
...とプロパティー値:
ReSharper: Code completion in CSS
さらに、ReSharperはclass属性の値の中でコード補完を呼び出すときに使用可能なクラスを提案しています...
ReSharper: Code completion in CSS
...およびHTMLまたはASP.NETマークアップファイルのid属性内に使用可能なID:
ReSharper: Code completion in CSS

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

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

現在のキャレット位置でコンテキストアクションが使用可能になるとすぐに、ReSharperは対応するアクションインジケーター ThemedIcon ContextAction Screen Gray をキャレットの左側に表示します。しかし時々、ReSharperは現在のキャレットポジションのために文脈上利用可能ないくつかの機能を提供します。この場合、最も優先度の高いアクションに対応するアクションインジケータが表示され、その他のすべてのアクションは、アクションインジケータをクリックするか、Alt+Enter を押してアクションリストを展開したときにのみ表示されます。コンテキストアクションは最も優先順位が低いため、アクションリストの一番下に表示されることがよくあります。

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

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

ReSharper: Context actions in CSS

クイック・ドキュメント

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

CSS要素のドキュメントを素早く表示するには

  1. CSSファイルまたはマークアップファイルのプロパティー、関数、擬似要素、疑似クラスまたはメディア機能にキャレットを配置します。

  2. Ctrl+Q を押すか、メインメニューからReSharper | 編集 | クイックドキュメントを表示するを選択します。クイック・ドキュメントポップアップには、対応する要素の要約情報が表示されます。

    ReSharper: Quick documentation in CSS

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

コードの並べ替え

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

最終更新日: 2019年11月18日

関連ページ:

コーディング支援

ReSharperはさまざまなコーディング支援機能を提供します。これにより、コードの記述と編集がはるかに高速になり、生産性が向上し、時間を節約できます。このセクションで説明されている機能の他に、ReSharperはいくつかのコード生成機能とコードテンプレートを提供します。ReSharperのコーディ...

カラーアシスタンス

ReSharperには、コード内のカラー定義を扱うのに役立つ一連の機能が用意されています。どのように色が定義されていても、色の値には対応する色で下線が引かれます。ポインタを色の値の上に置くと、色の値を他の形式でチェックすることができます。色は補完リストでも視覚化されています。強調表示されている色の定...

コンテキスト・アクション

コンテキストアクションのいくつかの例をReSharperWebサイトでチェックすることができます。コンテキストアクションは、エディターで直接利用できるコード変換ヘルパーです。クイックフィックスとは対照的に、コンテキストアクションは問題の解決やコードの改善を目的としているためはなく、アクセス修飾子の変...

コード要素の並べ替え

Ctrl+Shift+Alt+Up/Down/Left/RightまたはCtrl+Shift+Alt+H/J/K/Lリモートデスクトップを使用する場合は、Ctrl+Shift+Alt+H/J/K/Lショートカットを使用してください。ReSharperを使用すると、コード内の式、ステートメント、型メン...

コードインスペクションとCSSのクイックフィックス

ReSharperのコード解析の主な機能は、CSSでもサポートされています。これらの機能の詳細については、コード解析の該当するトピックを参照してください。このセクションのメイントピックでは、フィーチャマトリックスを見つけて、CSSで正確にサポートされているものを確認することもできます。このトピックで...

CSSのコードスタイルアシスタンス

コードスタイルの設定は、レイヤーベースの設定のメカニズムを使用して保存されます。とりわけ、このメカニズムにより、さまざまなソリューションのさまざまな設定を維持したり、これらの設定をVCSに保持したり、チームメンバーと自動的に共有することができます。ReSharperはCSSで以下のコードスタイルアシ...