CSS

始める前に

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

コード補完

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

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

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

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

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

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

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

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

WebStorm を使うと、プロジェクトの依存関係としてライブラリを追加しなくても、HTML ファイルで CDN からリンクした Twitter Bootstrap や他の CSS ライブラリのクラス名補完が利用できます。

外部 CSS ライブラリへの CDN リンクを含む HTML ファイルを開きます。 WebStorm はリンクをハイライトします。
ライブラリの補完を有効にするには、リンク上で Alt+Enter を押し、リストからライブラリのダウンロードを選択します。または、リンクの上にマウスを置き、ライブラリのダウンロードをクリックします。

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

CSS におけるクラウド補完と行全体補完

WebStorm は CSS コードでクラウド補完とフルライン補完を提供します。

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

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

Ctrl+Alt+S を押して設定を開き、エディター｜一般｜インライン補完を選択してください。
ローカルの Full Line 補完候補を有効にするチェックボックスを選択し、 CSS のようなチェックボックスが選択されていることを確認します。

AI Assistant 搭載のクラウド補完は、プロジェクトのコンテキストに基づき、単一行・コードブロック、関数全体までリアルタイムで自動補完します。

クラウド補完は、コンテキストを考慮して構文的に妥当なソリューションを提案し、さまざまなコードインスペクションを事前に実行して、エラーとなる候補を除外します。

クラウド補完を有効にする

AI Assistant プラグインをインストールして有効にします。
Ctrl+Alt+S を押して設定を開き、エディター｜一般｜インライン補完を選択してください。
クラウド補完候補を有効にするチェックボックスを選択し、 HTML（エイチティーエムエル）チェックボックスが選択されていることを確認します。

検索とナビゲーション

スタイルシートシンボルの使用箇所を見つけるには、キャレットをその位置に置き、 Alt+F7 を押します。詳しくはプロジェクトの使用箇所を検索するを参照してください。
スタイルシートシンボルの使用箇所からその定義に移動するには、 Ctrl+B を押します。定義へのナビゲーションは、変数やミックスインだけでなく、クラス、ID、セレクター (ネストされたセレクターやアンパサンド & を含むセレクターを含む) に対しても利用できます。
宣言に移動の詳細を参照してください。

ドキュメントの検索

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

セレクターの場合、WebStorm もその特異性を表示します。

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

プロパティにキャレットを置き、 Ctrl+Q を押すか、メインメニューから表示 | クイックドキュメントルックアップを選択します。
プロパティにカーソルを合わせると、WebStorm はすぐにドキュメントポップアップでリファレンスを表示します。
この動作をオフにすることも、ポップアップの表示を速くまたは遅くするように設定することもできます。以下のドキュメントポップ上への動作の構成を参照してください。

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

コードシンボル上にマウスを移動したときに自動的にドキュメントを表示しないようにするには、ポップアップでをクリックし、マウス移動時に表示するオプションを無効にします。
ドキュメントポップアップを速くまたは遅く表示するには、設定ダイアログ（Ctrl+Alt+S ）を開き、エディター | 一般 | コード補完に移動してから、ドキュメントのポップアップを表示チェックボックスを選択して遅延時間を指定します。

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

ドキュメントポップアップ Ctrl+Q で下部のリンクをクリックします。
Shift+F1 を押すか、メインメニューから表示 | 外部ドキュメントを選択します。

フォーマット

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

スタイルシート言語のフォーマットを構成するには、設定ダイアログ（Ctrl+Alt+S ）を開き、エディター | コードスタイル | スタイルシート | <your Style Sheet language>；に移動して、タブとインデント、スペース、中括弧と中括弧、ハードマージンとソフトマージンなどの言語固有の設定を構成します。
設定を変更すると、プレビュー領域に変更が書式にどのように影響するかが表示されます。
CSS、SCSS、Less のコンテキストでは、WebStorm はデフォルトで、 import ステートメントおよび URL の生成された文字列リテラルに二重引用符を使用します。単一引用符を使用するには、「その他」タブを開き、「引用符」リストから「単一」を選択します。
再フォーマット後に選択したスタイルをファイル全体に適用するには、リストの整形時に強制するチェックボックスを選択します。
現在、引用符の構成を変更しても、 <style> タグ内に挿入されたスタイルシートと CSS コードには影響しません。
コードフラグメントを再フォーマットするには、エディターでそれを選択して Ctrl+Alt+L を押します。
ファイルまたはフォルダーを再フォーマットするには、プロジェクトツールウィンドウ（Alt+1 ）で対象を選択し、 Ctrl+Alt+L を押します。詳細については、コードの再フォーマットと再配置を参照してください。
あるいは、 Prettier (Ctrl+Alt+Shift+P) を使用することもできます。

リファクタリング

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

変数の導入

エディターで、変数に変換する式にキャレットを置き、 Ctrl+Alt+V を押すか、コンテキストメニューまたはメインメニューからリファクタ | 導入 | 変数の導入を選択します。
選択した式が複数出現する場合は、複数の出現箇所が見つかりましたリストからこの出現箇所だけを置換または出現箇所をすべて置換を選択してください。
.scss および .sass の場合、変数のグローバルスコープまたはローカルスコープを選択します。
赤い枠の付いたフィールドで、提案された変数名をそのまま使用するか、カスタム名を指定します。準備ができたら Enter を押します。

WebStorm を使うと、CSS、SCSS、Sass、Less ファイルの既存の宣言から新しいルールセットを作成したり、リファクタリングやインテンションアクションでファイル間のルールセット全体を移動することもできます。

ルールセットを導入する

導入する宣言を選択します。宣言が 1 つだけ必要な場合は、宣言の中にキャレットを置くだけです。
Alt+Enter を押し、リストからルールセットを導入を選択します。

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

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

ルールセット内の移動する任意の場所にキャレットを置き、 F6 を押します。
表示されたダイアログで、ルールセットを移動するファイルを指定します。指定したファイルが存在しない場合、WebStorm はファイルの作成を提案します。
デフォルトでは、WebStorm はルールセットが移動されるファイルを自動で開きます。この動作を変更するには、エディターで開くチェックボックスをオフにします。

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

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

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

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

設定ダイアログ（Ctrl+Alt+S ）でエディター | インスペクションに移動します。
CSS ノードを展開してプロパティは選択されたブラウザーと互換性がありませんを選択します。オプションエリアで、ターゲットにするブラウザーとその最小バージョンを選択します。
オプション領域で、プロパティの可用性を確認するブラウザーを選択します。選択したブラウザーのターゲットバージョンを指定します。

色の管理

WebStorm は CSS カラーの管理に対応しており、コード補完、クイックドキュメント検索、プレビューなどが利用できます。絶対色、相対色、混合色のコーディング支援が行われます。

色を指定する

キャレットを color プロパティに置き、 Ctrl+Space を押して、目的の色の値を選択するか、色を選択… を押してカスタムの色の値を選択します。
人間が判読できる色名の代わりにコードを使うには、 Alt+Enter を押してリストから色を<color code system> に変換；を選択します。ここで、<color code system> は HEX、 HSL、 HWB、 RGB、 lch、 oklch 、または oklab です。

色の変更

ガター内のカラーアイコンをクリックし、ポップアップで目的の色を選択します。
または、キャレットを色のプロパティに置き、 Alt+Enter を押して、リストから色の変更を選択し、ポップアップで目的の色を選択します。

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

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

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

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

HTML や XHTML ファイルでは、WebStorm で任意のタグに適用されたすべてのスタイルが確認できます。

タグのコンテキストメニューからタグに適用されるスタイルを表示を選択します。
WebStorm は CSS スタイルツールウィンドウを開きます。このウィンドウには 2 つのペインがあり、左側のペインではタグのスタイル、右側のペインではその定義を表示します。各タグごとに、WebStorm は個別のタブを開きます。
ツールウィンドウから、ソースコード内のタグやプロパティ定義へ移動できます。
- タグに移動するには、左側のペインのツールバーのをクリックします。
- プロパティの定義に移動するには、左側のペインでそれを選択し、右側のペインのツールバーのをクリックします。

構文ハイライトの構成

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

設定ダイアログ（Ctrl+Alt+S ）でエディター | カラースキーム | CSS に移動します。
カラースキームを選択し、デフォルトから継承されたハイライト設定をそのまま使用するか、カラースキーム：エディターのフォントと色彩の説明に従ってカスタマイズしてください。

2026 年 6 月 8 日