PhpStorm 2026.3 Help

CSS

始める前に

設定で CSS プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 プラグイン を選択します。 検索フィールドに CSS と入力します。 プラグインに関する詳細は、 プラグインの管理を参照してください。

コード補完

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

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

HTML タグ内の完全な CSS クラス名

HTML ファイルでは、PhpStorm はまず style タグと link タグでリンクされたファイルからクラスと ID を提案します。 一致する結果が見つからない場合は、PhpStorm はプロジェクト内のすべてのスタイルシートファイルで定義されているシンボルも提案します。

スタイルブロック内で定義されたクラスの補完
リンクされた CSS ファイルで定義されたクラスの補完

プロジェクトで定義されているすべてのクラスと ID をすぐに表示するには、入力を開始する前に Ctrl+Space を 2 回押してください。

HTML のスタイルシートシンボルのプロジェクト全体の補完

テンプレートファイル内の完全な CSS クラス名

テンプレートファイル内の完全な CSS クラス名

JSX コード内の完全な CSS クラス名

CSS クラス名の完成

外部ライブラリからの完全な CSS クラス名

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

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

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

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

CSS での Full Line 補完

PhpStorm は CSS コードで Full Line 補完を提供します。 行全体コード補完機能は、ローカルで実行されるディープラーニングモデルを使用して、コードの行全体を提案します。 PhpStorm ではすぐに利用可能で、追加のライセンスは必要ありません。

スタイルシートで行全体コード補完を有効にする

  1. Ctrl+Alt+S を押して設定を開き、 エディター | 一般 | コード補完 | インライン を選択します。

  2. 言語モデルを用いたインライン補完を有効化する チェックボックスを選択し、 ローカル オプションが選択されていることを確認してください。

  3. CSS のような チェックボックスが 提案の表示対象 エリアで選択されていることを確認してください。

    行全体補完を有効にする

検索とナビゲーション

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

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

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

ドキュメントの検索

プロパティと疑似要素については、PhpStorm は対応する MDN 記事からの概要を表示できます。 この概要は ドキュメント ポップアップに表示され、プロパティとその値の簡単な説明と、対応する Web プラットフォームのベースラインステータス(英語)が表示されます。

スタイルシートのクイックドキュメント: ベースライン、広く利用可能
スタイルシートのクイックドキュメント: ベースライン、新たに利用可能
スタイルシートのクイックドキュメント: ベースライン、限定的な利用可能

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

ドキュメントの検索: 特異性 fpr セレクター

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

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

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

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

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

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

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

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

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

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

整形

PhpStorm の組み込みフォーマッタを使用すると、スタイルシートコードの一部だけでなく、ファイルやフォルダー全体を、言語固有のコードスタイル要件に合わせて再フォーマットできます。 また、フォーマッタはコードを生成またはリファクタリングする際に自動的に起動します。

  • スタイルシート言語のフォーマットを構成するには、 設定 ダイアログ（Ctrl+Alt+S ）を開き、 エディター | コードスタイル | スタイルシート | <あなたのスタイルシートの言語> に移動して、タブとインデント、スペース、中括弧と中括弧、ハードマージンとソフトマージンなどの言語固有の設定を構成します。

    設定を変更すると、 Preview 領域に変更が書式にどのように影響するかが表示されます。

  • CSS、SCSS、Less コンテキストでは、PhpStorm はデフォルトで、 import ステートメントおよび URL で生成された文字列リテラルに二重引用符を使用します。 単一引用符を使用するには、「その他 」タブを開き、「引用符 」リストから「単一 」を選択します。

    再フォーマット後に選択したスタイルをファイル全体に適用するには、リストの 整形時に強制する チェックボックスを選択します。

  • コードフラグメントを再フォーマットするには、エディターでそれを選択して Ctrl+Alt+L を押します。

  • ファイルまたはフォルダーを再フォーマットするには、 Project ツールウィンドウ（Alt+1 ）で対象を選択し、 Ctrl+Alt+L を押します。 詳細については、 コードの再フォーマットと再配置を参照してください。

  • あるいは、 Prettier (Ctrl+Alt+Shift+P) を使用することもできます。

リファクタリング

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

Style sheets: introducing a variable

変数の導入

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

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

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

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

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

ルールセットを導入する

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

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

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

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

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

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

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

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

Rename refactoring

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

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

スタイルシートの互換性インスペクションポップアップ

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

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

  2. CSS ノードを展開して プロパティは選択されたブラウザーと互換性がありません を選択します。 Options エリアで、ターゲットにするブラウザーとその最小バージョンを選択します。

  3. Options 領域で、プロパティの可用性を確認するブラウザーを選択します。 選択したブラウザーのターゲットバージョンを指定します。

CSS 互換性インスペクション設定

色の管理

PhpStorm は、 CSS 色管理のサポートを提供し、 コード補完、 クイックドキュメント検索、 色のプレビューが含まれます。 絶対色、相対色、混合色のコーディング支援が提供されます。

カラーマネジメントのためのコーディング支援

色を指定する

  • キャレットを color プロパティに置き、 Ctrl+Space を押して、目的の色の値を選択するか、 色の選択 ... を押してカスタムの色の値を選択します。

    色の選択

  • 人間が読める色名の代わりにコードを使用するには、 Alt+Enter を押して、リストから カラーを <カラーコードシステムに変換> を選択します。ここで、<カラーコードシステム> は HEX、 HSL、 HWB、 RGB、 lch、 oklch 、または oklab です。

    色名の代わりにコードを使用する

色の変更

  • ガター内のカラーアイコンをクリックし、ポップアップで目的の色を選択します。

    色を選ぶ

  • または、キャレットを色のプロパティに置き、 Alt+Enter を押して、リストから 色の変更 を選択し、ポップアップで目的の色を選択します。

    色の変更 - コンテキストメニュー

カラープレビューを切り替える

PhpStorm は絶対色、相対色、混合色のプレビューを表示します。

カラープレビューの紹介

  • デフォルトでは、PhpStorm はカラープレビューをガター内のアイコンとして表示します。 背景にカラープレビューを表示するには、 設定 ダイアログ（Ctrl+Alt+S ）を開き、 エディター | 外観 に移動して CSS 色プレビューを背景として表示する チェックボックスをオンにします。

    背景にカラープレビューを表示する

  • カラープレビューガターアイコンを復元するには、 設定 ダイアログ (Ctrl+Alt+S) を開き、 エディター | 一般 | ガターアイコン に移動して、 共通 領域の 色プレビュー チェックボックスを選択します。

    ガターでカラープレビューを有効にする

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

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

body タグに適用されているスタイルの表示

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

    PhpStorm は 2 つのペインを持つ CSS スタイル ツールウィンドウを開き、左側のペインにはタグのスタイル、右側のペインにはその定義が表示されます。 タグごとに、PhpStorm は個別のタブを開きます。

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

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

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

構文ハイライトの構成

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

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

  2. カラースキームを選択し、デフォルトから引き継がれたハイライト設定を受け入れるか、 色とフォント に記載された手順 に従ってカスタマイズしてください。

2026 年 11 月 9 日
スタイルシートCSS の最小化