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