WebStorm 2019.3ヘルプ

スタイル・シート

WebStormを使用すると、Sass(英語)Less(英語)SCSS(英語)Stylus(英語)など、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を使用すると、プロジェクトにこれらのライブラリを追加することなく、HTMLファイル内のCDNからリンクされているTwitter Bootstrap(英語)または他のCSSライブラリからクラス名の補完を取得することもできます。

  1. 外部CSSライブラリへのCDNリンクを含むHTMLファイルを開きます。WebStormはリンクを強調表示します。

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

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

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

Completion for Sass and SCSS selectors

検索とナビゲーション

  • スタイルシート記号の使用箇所を見つけるには、キャレットをその位置に置き、Alt+F7を押します。プロジェクトの使用箇所を検索するからさらに学びましょう。

  • スタイルシートシンボルの使用箇所からその定義にジャンプするには、Ctrl+Bを押します。定義へのナビゲーションは、クラス、ID、セレクター(ネストされたセレクター、アンパサンド & を含むセレクターを含む)、および変数とミックスインで使用できます。

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

ドキュメントの検索

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

Style sheets quick documentation: compatible browsers are listed

キャレットでプロパティのドキュメントを表示する

Ctrl+Q を押すか、メインメニューから表示 | クイック・ドキュメント・ルックアップを選択します。WebStormは、プロパティの簡単な説明を含むドキュメントポップアップを開きます。

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

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

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

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

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

フォーマット

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

  • スタイルシート言語の書式を構成するには、設定/環境設定ダイアログ Ctrl+Alt+Sを開き、エディター | コード・スタイル | スタイル・シート | <あなたのスタイルシートの言語>に移動して、タブとインデント、スペース、折り返しとブレース、ハードマージンとソフトマージンなどの言語固有の設定を構成します。

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

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

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

  • ファイルまたはフォルダーを再フォーマットするには、プロジェクトツールウィンドウでそれを選択して Ctrl+Alt+Lを押します。

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

あるいは、Prettier(英語)フォーマッター(Ctrl+Shift+Alt+P)を使用することもできます。詳細については、Prettierを参照してください。

リファクタリング

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

変数を導入するには

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

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

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

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

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

ルールセットを導入するには

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

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

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

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

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

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

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

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

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

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

Style sheet compatibility inspection popup

互換性チェックを有効にするには

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

  2. CSSノードを展開してプロパティに対するブラウザーの互換性を選択します。オプションエリアで、ターゲットにするブラウザとその最小バージョンを選択します。

CSS compatibility inspection settings

色の値を変更する

WebStormを使用すると、16進コードを入力せずにスタイルシートの色の値を簡単に変更できます。

色を選択するには

  1. 編集したいスタイルシートを開きます。

  2. color:と入力し、Ctrl+Spaceを押します。

  3. カスタムリストを選ぶには、候補リストまたは色の選択...から希望のカラー値を選択してください。

色を変更するには

  1. 編集するスタイルシートを開き、変更するカラープロパティを探します。

  2. ガターの色アイコンをクリックします。

    アイコンが表示されていない場合は、Alt+Enter を押してリストから色を変更するを選択します。下記のガターにカラーアイコンを表示するにはを参照してください。

  3. 開いた色を選択してくださいダイアログで、新しい色を選択し、選択をクリックします。

色のコードをプレビューするには

  • WebStormは、各 color プロパティを対応する色のガターアイコンでマークします。色アイコンの上にマウスを置くと、WebStormはカラープレビューとその16進コードを示すポップアップを表示します。

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

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

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

  1. 設定/環境設定ダイアログ Ctrl+Alt+Sで、エディター | 一般 | ガター・アイコンに移動します。ガターアイコンページが開きます。

  2. 共通領域で、色プレビューチェックボックスを選択します。

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

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

Viewing the styles applied to the tag<body>
  • タグのコンテキストメニューからタグの適用されたスタイルを表示を選択します。

    WebStormは2つのペインでCSS スタイルツールウィンドウを開きます。左側のペインはタグのスタイルを示し、右側のペインはそれらの定義を示します。タグごとに、WebStormは別々のタブを開きます。

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

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

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

構文強調表示の構成

好みや習慣に応じてCSS対応の構文強調表示を設定できます。

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

  2. 配色を選択するか、デフォルトから継承された強調表示設定を受け入れるか、または色とフォントの設定の説明に従ってカスタマイズします。

最終更新日: 2020年2月17日

関連ページ:

使用箇所を検索

使用箇所の検索アクションを使用すると、コードベース全体でコード要素の参照を検索できます。検索プロセスを管理し、単一のファイルのみで検索したり、検索をプロジェクト全体に拡張したり、特定の検索範囲を作成したりできます。さらに、使用箇所の強調表示の色を構成したり、用途の自動強調表示を完全に無効にしたりでき...

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

さまざまなアクションやポップアップを使用して、エディター内のコードを素早くナビゲートすることができます。エディターウィンドウとツールウィンドウ間の移動に関する詳細情報については、エディターの基本を確認してください。キャレットでナビゲートする前のキャレット位置を見るには、メインメニューからを選択するか...

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

WebStormでは、コード・スタイル設定で指定した要件に従ってコードを再フォーマットできます。ただし、プロジェクトでEditorConfigを使用する場合、ファイルで指定されたオプションは、コードを再フォーマットするときにコードスタイル設定で指定されたオプションをオーバーライドします。設定にアクセ...

Prettier

Prettierは.js,.ts,.css,.less,.scss,.vue、および.jsonコードをフォーマットするためのツールです。WebStormでは、Prettier で再フォーマットアクションを使用して、選択したコードフラグメントとファイル全体またはディレクトリ全体をフォーマットできます。...

色とフォントの構成

開発者として、エディターのソースコード、検索結果、デバッガ情報、コンソールの入出力など、多くのテキストリソースを使用します。色とフォントスタイルは、このテキストの書式設定に使用され、一目で理解しやすくなります。WebStormは推奨する色とフォントを定義するカラースキームを使います。配色は、ウィンド...

React Native

React Nativeを使用すると、JavaScriptとReactを使用して、iOSとAndroid用のネイティブモバイルアプリケーションを開発できます。これはFacebookによって作成され、Instagram、Airbnb、現在はJetBrains独自のYouTrack mobileアプリケ...