PhpStorm 2020.2 ヘルプ

スタイルシート

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

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

始める前に

  • 設定 / 環境設定 | プラグインページで CSS バンドルプラグインが有効になっていることを確認してください。詳細については、プラグインの管理を参照してください。

コード補完

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

Style Sheets: basic code completion

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

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

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

Project-wide completion for Style Sheet symbols in HTML

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

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

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

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

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

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

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

Completion for Sass and SCSS selectors

検索とナビゲーション

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

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

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

ドキュメントの検索

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

Style sheets quick documentation: compatible browsers are listed

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

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

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

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

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

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

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

  • ドキュメントの表示を自動的にオフにするには、設定 / 環境設定ダイアログ Ctrl+Alt+S を開き、エディター | コード編集に移動して、マウス移動でクイックドキュメントを表示するチェックボックスをオフにします。

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

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

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

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

フォーマット

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

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

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

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

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

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

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

または、Prettier(英語) フォーマッタを使用できます。詳細については、Prettier を参照してください。

リファクタリング

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

Style sheets: introducing a variable

変数を導入する

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

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

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

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

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

ルールセットを導入する

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

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

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

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

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

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

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

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

Rename refactoring

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

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

Style sheet compatibility inspection popup

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

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

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

CSS compatibility inspection settings

色の値を変更する

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

Editing color values in Style Sheets

色の選択

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

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

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

色を変更する

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

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

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

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

色のコードをプレビュー

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

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

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

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

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

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

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

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

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

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

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

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

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

構文強調表示の構成

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

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

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

最終更新日 :

関連ページ:

プラグインを管理する

プラグインは PhpStorm のコア機能を拡張します。彼ら:バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産性を向上、...

JavaScript ライブラリを構成する

PhpStorm では、ライブラリは、PhpStorm が編集するプロジェクトコードから取得する関数とメソッドに加えて、PhpStorm の内部知識に関数とメソッドが追加されたファイルまたはファイルのセットです。プロジェクトの範囲では、そのライブラリはデフォルトで書き込み保護されています。PhpSt...

使用箇所を検索

コードを記述または編集するときに、変更または削除するコード要素に遭遇する場合があります。変更を行う前に、コード要素がどこで使用され、アプリケーションにどのように影響するかを確認することをお勧めします。使用箇所の検索アクションを使用すると、コードベース全体でコード要素の参照を検索できます。検索プロセス...

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

さまざまなアクションやポップアップを使用して、エディター内のコードを素早くナビゲートすることができます。エディターウィンドウとツールウィンドウ間の移動に関する詳細情報については、エディターの基本を確認してください。PhpStorm で利用可能なナビゲーションオプションをチェックするためにビデオチュー...

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

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

Prettier

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