CSS
始める前に
設定で CSS プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 を選択します。 インストール済み タブをクリックします。 検索フィールドに CSS と入力します。 プラグインの詳細については、 プラグイン管理を参照してください。
コード補完
JetBrains Rider はプロパティ、その値、セレクター、変数、ミックスインのコード補完を提供します。
CSS クラスと ID の補完機能は、HTML ファイル、さまざまな種類のテンプレート（たとえば、Angular や Vue.js）、JSX コードで利用できます。
HTML タグ内の完全な CSS クラス名
HTML ファイルでは、JetBrains Rider はまず style タグおよび link タグでリンクされたファイルからクラスや ID を提案します。 一致する結果が見つからない場合、JetBrains Rider はプロジェクトのすべてのスタイルシートファイルで定義されているシンボルも提案します。
プロジェクトで定義されているすべてのクラスと ID をすぐに表示するには、入力を開始する前に Ctrl+Space を 2 回押してください。
テンプレートファイル内の完全な CSS クラス名
JSX コード内の完全な CSS クラス名
外部ライブラリからの完全な CSS クラス名
JetBrains Rider を使うと、プロジェクトの依存関係にこれらのライブラリを追加せずに、 Twitter Bootstrap や HTML ファイルの CDN からリンクされている他の CSS ライブラリからクラス名の補完も利用できます。
外部 CSS ライブラリへの CDN リンクを含む HTML ファイルを開きます。 JetBrains Rider はリンクをハイライトします。
ライブラリの補完を有効にするには、リンク上で Alt+Enter を押し、リストから を選択します。 または、リンクの上にマウスを置き、 ライブラリをダウンロード をクリックします。
ライブラリは、 ページの JavaScript ライブラリのリストに追加されます。 詳細については、「CDN リンクを介して追加されたライブラリの構成 」を参照してください。
CSS におけるクラウド補完と行全体補完
JetBrains Rider は CSS コードで クラウド補完と 行全体補完を提供します。
行全体コード補完機能は、ローカルで実行されるディープラーニングモデルを用いて、コード行全体を提案します。 JetBrains Rider ですぐに利用でき、追加のライセンスは必要ありません。
スタイルシートで行全体コード補完を有効にする
Ctrl+Alt+S を押して設定を開き、 エディター | 一般 | コード補完 | インライン を選択します。
Enable inline completion using language models チェックボックスを選択し、 ローカル オプションが選択されていることを確認してください。
提案の表示対象 エリアの CSS のような チェックボックスが選択されていることを確認してください。
AI Assistant によるクラウド補完は、プロジェクト コンテキストに基づき単一行、コードブロック、関数全体までリアルタイムで自動補完します。
クラウド補完はコンテキストを考慮して構文的に適切な提案を行い、あらかじめ コードインスペクション を実行して、エラーとなるバリエーションを除外します。
クラウド補完を有効にする
Ctrl+Alt+S を押して設定を開き、 エディター | 一般 | コード補完 | インライン を選択します。
Enable inline completion using language models チェックボックスを選択し、 クラウド オプションが選択されていることを確認してください。
提案の表示対象 エリアの CSS のような チェックボックスが選択されていることを確認してください。
検索とナビゲーション
ドキュメントの検索
プロパティや疑似要素については、JetBrains Rider は対応する MDN 記事 からの概要を表示できます。 この概要は ドキュメント ポップアップに表示され、プロパティとその値の簡単な説明と、対応する Web プラットフォームのベースラインステータス(英語)が表示されます。
セレクターの場合、JetBrains Rider もその 詳細度 を表示します。
プロパティのドキュメントを表示
プロパティにキャレットを置き、 Ctrl+Q を押すか、メインメニューから を選択します。
プロパティにカーソルを合わせると、JetBrains Rider はすぐにその参照を ドキュメント ポップアップに表示します。
この動作をオフにすることも、ポップアップの表示を速くまたは遅くするように設定することもできます。以下の ドキュメントポップ上への動作の構成を参照してください。
ドキュメントポップアップの動作を設定する
コードシンボル上にカーソルを合わせたときに自動でドキュメントを表示しないようにするには、ポップアップ内で
をクリックし、 マウス移動時に表示する オプションを無効化します。ドキュメント ポップアップを速くまたは遅く表示するには、 設定 ダイアログ（Ctrl+Alt+S ）を開き、 に移動してから、 ドキュメントのポップアップを表示する チェックボックスを選択し、遅延時間を指定してください。
ブラウザーで MDN ドキュメントを開く
ドキュメント ポップアップ Ctrl+Q で、下部のリンクをクリックします。
Shift+F1 を押すか、メインメニューから を選択します。
リファクタリング
JetBrains Rider では、スタイルシート内の式を変数に変換し、 .css ファイルでは var(--var-name) 構文、 .scss および .sass ファイルでは $ 構文を使ってこれらの変数を導入できます。
変数の導入
エディターで、変数に変換する式にキャレットを置き、 Ctrl+Alt+V を押すか、コンテキストメニューまたはメインメニューから を選択します。
選択した式が複数出現する場合は、 複数の出現箇所が見つかりました リストから この出現箇所だけを置換 または 出現箇所をすべて置換 を選択してください。
.scss および .sass の場合、変数の グローバルスコープまたは ローカルスコープを選択します。
赤い枠の付いたフィールドで、提案された変数名をそのまま使用するか、カスタム名を指定します。 準備ができたら Enter を押します。
JetBrains Rider を使うと、CSS、SCSS、Sass、Less ファイル内の宣言から新しいルールセットを作成したり、リファクタリングやインテンションアクションでルールセット全体をファイル間で移動したりできます。
ルールセットを導入する
導入する宣言を選択します。 宣言が 1 つだけ必要な場合は、宣言の中にキャレットを置くだけです。
Alt+Enter を押し、リストから ルールセットを導入 を選択します。
JetBrains Rider は同じセレクターで新しいルールセットを作成し、選択した宣言をそこへ移動します。 選択範囲にコメント、ネストしたセレクタなどが含まれている場合、それらも新しいルールセットに移動されます。
ルールセットを他のファイルに移動する
ルールセット内の移動する任意の場所にキャレットを置き、 F6 を押します。
表示されたダイアログで、ルールセットを移動するファイルを指定します。 指定されたファイルが存在しない場合、JetBrains Rider は作成を提案します。
デフォルトで、JetBrains Rider はルールセットが移動されるファイルを自動的に開きます。 この動作を変更するには、 エディターで開く チェックボックスをオフにします。
コピー、 移動、 名前変更などの一般的なリファクタリングも利用できます。
ブラウザーとの互換性を確認する
ドキュメントポップアップで検索するだけでなく、その場で特定のブラウザーとの互換性についてスタイルシートのプロパティを確認できます。 このインスペクションは MDN ブラウザー互換性データ(英語)に基づいており、対象のブラウザーのいずれかでプロパティがサポートされていない場合は常に警告を表示します。
互換性チェックをオンにする
設定 ダイアログ (Ctrl+Alt+S) で、 に進みます。
CSS ノードを展開して プロパティは選択されたブラウザーと互換性がありません を選択します。 オプション エリアで、ターゲットにするブラウザーとその最小バージョンを選択します。
オプション 領域で、プロパティの可用性を確認するブラウザーを選択します。 選択したブラウザーのターゲットバージョンを指定します。
色の管理
JetBrains Rider は CSS カラー管理をサポートしており、 コード補完、 クイックドキュメント検索、 カラー プレビューを含みます。 絶対色、相対色、混合色に対してコーディング支援が提供されます。
色を指定する
色を変更
ガター内のカラーアイコンをクリックし、ポップアップで目的の色を選択します。
または、キャレットを色のプロパティに置き、 Alt+Enter を押して、リストから 色を変更 を選択し、ポップアップで目的の色を選択します。
カラープレビューを切り替える
JetBrains Rider は絶対色、相対色、混合色のプレビューを表示します。
デフォルトで、JetBrains Rider はガター内にカラープレビューをアイコンとして表示します。 背景にカラープレビューを表示するには、 設定 ダイアログ（Ctrl+Alt+S ）を開き、 に移動して CSS 色プレビューを背景として表示 チェックボックスをオンにします。
カラープレビューガターアイコンを復元するには、 設定 ダイアログ (Ctrl+Alt+S) を開き、 に移動して、 共通 領域の 色プレビュー チェックボックスを選択します。
タグに適用されたスタイルを表示する
HTML や XHTML ファイルでは、JetBrains Rider は任意のタグに適用されているすべてのスタイルを表示できます。
タグのコンテキストメニューから を選択します。
JetBrains Rider は CSS スタイル ツールウィンドウを開き、左側のペインにタグのスタイル、右側のペインにその定義を表示します。 タグごとに JetBrains Rider が個別のタブを開きます。
ツールウィンドウから、ソースコード内のタグやプロパティ定義に移動できます。
タグに移動するには、左側のペインのツールバーの
をクリックします。プロパティの定義に移動するには、左側のペインでそれを選択し、右側のペインのツールバーの
をクリックします。
構文ハイライトの構成
習慣や環境設定に応じて、CSS 対応の構文ハイライトを設定できます。
設定 ダイアログ (Ctrl+Alt+S) で、 に進みます。
カラースキームを選択するか、デフォルトから継承されたハイライト設定を受け入れるか、 カラースキーム：IDE テキストのフォントと色 の説明に従ってカスタマイズします。