スタイルシート

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

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

始める前に

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

コード補完

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

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

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

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

Project-wide completion for Style Sheet symbols in HTML

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

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

Enabling completion for an external CSS library

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

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

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

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

検索とナビゲーション

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

ドキュメントの検索

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

Style sheets quick documentation: compatible browsers are listed

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

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

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

Documentation look-up: specificity fpr selectors

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

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

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

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

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

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

フォーマット

WebStorm ビルトインフォーマッターを使用すると、言語固有のコードスタイル要件を満たすために、スタイルシートコードの断片とファイル全体およびフォルダー全体を再フォーマットできます。コードを生成またはリファクタリングすると、フォーマッタも自動的に起動します。

Single and double quotes in @import statement

スタイルシート言語のフォーマットを構成するには、設定ダイアログ（Ctrl+Alt+S）を開き、エディター | コードスタイル | スタイルシート | <あなたのスタイルシートの言語> に移動して、タブとインデント、スペース、中括弧と中括弧、ハードマージンとソフトマージンなどの言語固有の設定を構成します。
CSS、SCSS、Less コンテキストでは、WebStorm はデフォルトで、import ステートメントおよび URL で生成された文字列リテラルに二重引用符を使用します。単一引用符を使用するには、「その他」タブを開き、「引用符」リストから「単一」を選択します。
再フォーマット後に選択したスタイルをファイル全体に適用するには、リストの整形時に強制するチェックボックスを選択します。
現在、引用符の構成を変更しても、<style> タグ内に挿入されたスタイルシートと CSS コードには影響しません。
コードフラグメントを再フォーマットするには、エディターでそれを選択して Ctrl+Alt+L を押します。
ファイルまたはフォルダーを再フォーマットするには、プロジェクトツールウィンドウでファイルまたはフォルダーを選択し、Ctrl+Alt+L を押します。

詳細はコードの再フォーマットと再配置を参照してください。

あるいは、Prettier(英語) を使用することもできます。詳細については、「Prettier」を参照してください。

リファクタリング

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 を使用すると、16 進コードを入力せずにスタイルシートの色の値を簡単に変更できます。

色の選択

編集したいスタイルシートを開きます。
color: と入力し、Ctrl+Space を押します。
カスタムリストを選ぶには、候補リストまたは色の選択 ... から希望のカラー値を選択してください。

色の変更

編集するスタイルシートを開き、変更するカラープロパティを探します。
ガターの色アイコンをクリックします。
アイコンが表示されていない場合は、Alt+Enter を押してリストから色の変更を選択します。下記のガターにカラーアイコンを表示するにはを参照してください。
開いた色の選択ダイアログで、新しい色を選択し、選択をクリックします。

色のコードをプレビュー

WebStorm は、各 color プロパティを対応する色のガターアイコンでマークします。色アイコンの上にマウスを置くと、WebStorm はカラープレビューとその 16 進コードを示すポップアップを表示します。
人間が判読可能な色名の代わりにコードを使用するには、Alt+Enter を押してリストからカラーを <カラーコードシステムに変換> を選択します。ここで、<カラーコードシステム> は HEX(英語)、HSL(英語)、HWB(英語)、RGB(英語) です

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

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

設定ダイアログ（Ctrl+Alt+S）で、エディター | 一般 | ガターアイコンに移動します。ガターアイコンページが開きます。
共通領域で、色プレビューチェックボックスを選択します。

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

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

Viewing the styles applied to the tag<body>

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

構文ハイライトの構成

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

設定ダイアログ（Ctrl+Alt+S）で、エディター | カラースキームの切り替え | CSS に移動します。
配色を選択するか、デフォルトから継承されたハイライト設定を受け入れるか、色とフォントの説明に従ってカスタマイズします。

最終更新日: 2024 年 6 月 17 日

関連ページ：

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

プラグインは WebStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。デフォルトでは、WebStorm には多数のプラグインがバンドルされています。バンドルされたプラグインを無効にするこ...

JavaScript ライブラリを構成する

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

使用箇所の検索

使用箇所の検索アクションを使用すると、コードベース全体でコード要素の参照を検索できます。検索プロセスを管理し、単一のファイルのみを検索したり、検索範囲をプロジェクト全体に拡張したり、特定の検索範囲を作成したりできます。さらに、使用箇所のハイライトの色を設定したり、使用箇所の自動ハイライトを完全に無効にしたりすることもできます。ファイル内の使用箇所を検索するエディターで、検索するシンボルを選択すると、WebStorm はファイル内で見つかったすべての使用箇所を自動的にハイライトします。このハイライ...

ソースコードナビゲーション

さまざまなアクションやポップアップを使用して、エディター内のコードをすばやく移動することができます。エディターウィンドウとツールウィンドウ間の移動に関する詳細情報については、エディターの基本を確認してください。キャレットで移動する前のキャレット位置を見るには、メインメニューからを選択するか、を押します。前に進むには、を選択するかを押します。最後に編集した場所に移動するには、を押します。エディターで現在のキャレット位置を見つけるには、Ctrl+M を押します。大きなファイルをスクロールしたくな

コードの再フォーマットと再配置

WebStorm を使用すると、現在のコードスタイルスキームまたは .editorconfig ファイルで指定した要件に従ってコードを再フォーマットできます。で定義されていないものがあれば、プロジェクト設定から取得されます。コードの一部、ファイル全体、ファイルのグループ、ディレクトリ、モジュールを再フォーマットできます。また、コードの一部または一部のファイルを再フォーマットから除外することもできます。コードフラグメントを再フォーマットするエディターで、再フォーマットしたいコードフラグメントを選択しま...

Prettier

Prettier は、TypeScript、JavaScript、CSS、HTML、JSON などのさまざまな言語でファイルをフォーマットするツールです。WebStorm では、Prettier で整形アクションを使用して、ファイルまたはディレクトリ全体だけでなく、選択したコードフラグメントもフォーマットできます。WebStorm は、プロジェクト内の依存関係として、またはコンピューター上にグローバルに Prettier をインストールするとすぐに、このアクションを追加します。特定のファイルが変...