JetBrains Rider 2024.1 ヘルプ

言語およびフレームワーク: スタイルシート

JetBrains Rider を使用すると、Sass(英語)、Less(英語)、SCSS(英語)、Stylus(英語) など、CSS(英語) およびそれにコンパイルされるさまざまな言語でスタイル定義を記述できます。

スタイルシートのドキュメントの検索、ルールセットの作成と移動、変数の導入などもできます。

始める前に

設定で CSS プラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、プラグインを選択します。インストール済みタブをクリックします。検索フィールドに CSS と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。

コード補完

JetBrains Rider は、プロパティ、その値、セレクタ、変数、ミックスインにコード補完を提供します。

Style Sheets: basic code completion

完全なスタイルシートクラス

CSS、SCSS、Less、Sass のクラスと ID の補完は、HTML ファイル、さまざまな種類のテンプレート（Angular、Vue.js など）、JSX コードで利用できます。

HTML ファイルでは、JetBrains Rider は最初に style タグと link タグにリンクされたファイルからクラスと ID を提案します。一致する結果が見つからない場合、JetBrains Rider はプロジェクト内のすべてのスタイルシートファイルで定義されているシンボルも提案します。プロジェクトで定義されているすべてのクラスと ID をすぐに確認するには、入力を始める前に Ctrl+Space を 2 回押します。

Project-wide completion for Style Sheet symbols in HTML

外部ライブラリの完全なスタイルシートクラス

JetBrains Rider を使用すると、プロジェクトの依存関係にこれらのライブラリを追加せずに、Twitter Bootstrap(英語) または HTML ファイルの CDN からリンクされている他の CSS ライブラリからクラス名の補完を取得することもできます。

Enabling completion for an external CSS library

  1. 外部 CSS ライブラリへの CDN リンクを含む HTML ファイルを開きます。JetBrains Rider はリンクをハイライトします。

  2. ライブラリの補完を有効にするには、リンク上で Alt+Enter を押し、リストからライブラリのダウンロードを選択します。または、リンクの上にマウスを置き、ライブラリのダウンロードをクリックします。

ライブラリは、設定 | 言語およびフレームワーク | JavaScript | ライブラリページの JavaScript ライブラリのリストに追加されます。詳細については、「CDN リンクを介して追加されたライブラリの構成」を参照してください。

Sass および SCSS セレクター一式

JetBrains Rider は、ネストされたセレクター(英語)とアンパサンドで作成されたセレクター (&)(英語) を含む Sass および SCSS セレクターの補完も提供します。

Completion for Sass and SCSS selectors

検索とナビゲーション

Navigation for SCSS selectors

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

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

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

ドキュメントの検索

プロパティと擬似要素については、JetBrains Rider は対応する MDN 記事からの要約を表示できます。この要約はドキュメントポップアップに表示され、プロパティとその値の簡単な説明、さまざまなブラウザーとの互換性に関する情報が表示されます。

Style sheets quick documentation: compatible browsers are listed

このプロパティがすべてのバージョンのブラウザーで使用可能な場合、JetBrains Rider はその互換性に関する情報を表示しません。

それ以外の場合、ドキュメントポップアップには、このプロパティをサポートするブラウザーとそのバージョンも一覧表示されます。

セレクターの場合、JetBrains Rider もその特異性(英語)を示します。

Documentation look-up: specificity fpr selectors

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

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

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

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

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

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

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

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

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

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

リファクタリング

JetBrains Rider では、スタイルシートの式を変数に変換し、.css ファイルの var(--var-name) 構文、.scss および .sass ファイルの $ 構文を使用してこれらの変数を導入できます。

Style sheets: introducing a variable

変数の導入

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

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

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

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

JetBrains Rider を使用すると、CSS、SCSS、Sass、Less ファイル内の既存の宣言から新しいルールセットを作成し、リファクタリングおよびインテンションアクションを使用してルールセット全体をファイル間で移動することさえできます。

ルールセットを導入する

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

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

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

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

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

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

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

コピー、移動、名前変更などの一般的なリファクタリングも利用できます。

Rename refactoring

ブラウザーとの互換性を確認する

ドキュメントポップアップで検索するだけでなく、その場で特定のブラウザーとの互換性についてスタイルシートのプロパティを確認できます。このインスペクションは MDN ブラウザー互換性データ(英語)に基づいており、対象のブラウザーのいずれかでプロパティがサポートされていない場合は常に警告を表示します。

Style sheet compatibility inspection popup

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

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

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

CSS compatibility inspection settings

色の値を変更する

JetBrains Rider を使用すると、16 進コードを入力せずにスタイルシートの色の値を簡単に変更できます。

Editing color values in Style Sheets

色の選択

  1. 編集したいスタイルシートを開きます。

  2. color: と入力し、Ctrl+Space を押します。

  3. カスタムリストを選ぶには、候補リストまたは色の選択 ... から希望のカラー値を選択してください。

色の変更

  1. 編集するスタイルシートを開き、変更するカラープロパティを探します。

  2. ガターの色アイコンをクリックします。

    アイコンが表示されていない場合は、Alt+Enter を押してリストから色の変更を選択します。下記のガターにカラーアイコンを表示するにはを参照してください。

  3. 開いた色の選択ダイアログで、新しい色を選択し、選択をクリックします。

色のコードをプレビュー

  • JetBrains Rider は、各 color プロパティを対応する色のガターアイコンでマークします。色アイコンの上にマウスを置くと、JetBrains Rider はカラープレビューとその 16 進コードを示すポップアップを表示します。

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

ガターにカラーアイコンを表示する

デフォルトでは、JetBrains Rider はガターにカラーアイコンを表示します。それらが隠されている場合は、いつでも返却できます。

  1. 設定 / 環境設定ダイアログ（Ctrl+Alt+S）で、エディター | 一般 | ガターアイコンに移動します。ガターアイコンページが開きます。

  2. 共通領域で、色プレビューチェックボックスを選択します。

タグに適用されたスタイルを表示する

HTML および XHTML ファイルでは、JetBrains Rider は任意のタグに適用されたすべてのスタイルを表示できます。

タグに適用されたスタイルの表示 <body>

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

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

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

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

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

構文ハイライトの構成

好みや習慣に応じて CSS 対応の構文ハイライトを設定できます。

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

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

言語およびフレームワーク: Terraform CSS の最小化

関連ページ：

プラグインのインストール

プラグインは JetBrains Rider のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrai...

JavaScript ライブラリを構成する

言語と IDE のコンテキストでは、ライブラリはファイルまたはファイルのセットです。これらのファイルの関数とメソッドは、編集したプロジェクトコードから JetBrains Rider が取得する関数とメソッドに加えて、JetBrains Rider の内部知識に追加されます。プロジェクトのスコープでは、そのライブラリはデフォルトで書き込み保護されています。JetBrains Rider は、2 つの事前定義された自動生成ライブラリフォルダーを予約します。node_modules プロジェクト pac...

ソリューション内のテキストを検索して置換する

ソリューション全体、プロジェクト、ネストされた階層を持つ任意のディレクトリ、任意のスコープ内のテキストを検索して置き換えることができます。プレビュータブまたは検索ウィンドウで検索結果を確認します。ソリューション内のテキストを検索ソリューションの特定の部分のみを検索する場合は、ソリューションエクスプローラーで対応するノードを選択します。を押すか、を選択します。複数ファイル内検索ダイアログで、検索文字列を入力します。必要に応じて、検索オプションを指定します。をクリックするかを押して、最近の検索エン

ガターアイコン

ガターアイコンはエディターの左側にあります。これらは、いくつかの基本的なアクションと、フレームワークおよびテクノロジー固有のその他の機能を呼び出します。この設定ページを使用して、ガター内の Web 固有のアイコンを非表示または表示します。.NET 固有のガターアイコンは常に対応するコンテキストに表示され、非表示にすることはできません。テクノロジー関連のアイコンは、対応するプラグインがインストールされ有効になっている場合にのみ表示されることに注意してください。プラグインのインストールの詳細について...

配色: IDE テキストのフォントと色

開発者は、エディターのソースコード、検索結果、デバッガー情報、コンソールの入出力など、多くのテキストリソースを操作します。このテキストのフォーマットには色とフォントスタイルが使用されており、一目で理解できるようになります。JetBrains Rider では、IDE テキストで使用される色とフォントを定義する構成可能な配色から選択できます。事前定義された配色を使用するか、あなたの好みに合わせてカスタマイズすることができます。スキームを共有することも可能です。配色を選択を押して設定を開き、を選択し...

言語およびフレームワーク: Terraform

Terraform は、開発者と運用チームがクラウドプロバイダーの UI を介した手動構成ではなく、コードを使用してクラウドリソースとインフラストラクチャコンポーネントを定義、管理、プロビジョニングできるオープンソースツールです。これを使用すると、仮想マシン、ネットワーク、ストレージなどのインフラストラクチャリソースを宣言的かつ自動化された方法で管理できます。手動構成を成文化されたテンプレートに置き換えることで、一貫性のある再現可能なインフラストラクチャ設定が保証されます。Terraform と...