スタイルシート
PhpStorm を使用すると、Sass(英語)、Less(英語)、SCSS(英語)、Stylus(英語) など、CSS(英語) およびそれにコンパイルされるさまざまな言語でスタイル定義を記述できます。
スタイルシートのドキュメントの検索、ルールセットの作成と移動、変数の導入などもできます。
始める前に
設定で CSS プラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、 を選択します。インストール済みタブをクリックします。検索フィールドに CSS と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。
コード補完
PhpStorm は、プロパティ、その値、セレクタ、変数、ミックスインにコード補完を提供します。
![Style Sheets: basic code completion](https://resources.jetbrains.com/help/img/idea/2024.1/css_intro_completion.png)
完全なスタイルシートクラス
CSS、SCSS、Less、Sass のクラスと ID の補完は、HTML ファイル、さまざまな種類のテンプレート(Angular、Vue.js など)、JSX コードで利用できます。
HTML ファイルでは、PhpStorm は最初に style
タグと link
タグにリンクされたファイルからクラスと ID を提案します。一致する結果が見つからない場合、PhpStorm はプロジェクト内のすべてのスタイルシートファイルで定義されているシンボルも提案します。プロジェクトで定義されているすべてのクラスと ID をすぐに確認するには、入力を始める前に Ctrl+Space を 2 回押します。
![HTML のスタイルシートシンボルのプロジェクト全体の補完 Project-wide completion for Style Sheet symbols in HTML](https://resources.jetbrains.com/help/img/idea/2024.1/ws_html_completion_for_css.png)
外部ライブラリの完全なスタイルシートクラス
PhpStorm を使用すると、プロジェクトの依存関係にこれらのライブラリを追加せずに、Twitter Bootstrap(英語) または HTML ファイルの CDN からリンクされている他の CSS ライブラリからクラス名の補完を取得することもできます。
![Enabling completion for an external CSS library](https://resources.jetbrains.com/help/img/idea/2024.1/ws_css_enable_completion_for_external_libs.png)
外部 CSS ライブラリへの CDN リンクを含む HTML ファイルを開きます。PhpStorm はリンクをハイライトします。
ライブラリの補完を有効にするには、リンク上で Alt+Enter を押し、リストからライブラリのダウンロードをクリックします。
を選択します。または、リンクの上にマウスを置き、
ライブラリは、CDN リンクを介して追加されたライブラリの構成」を参照してください。
ページの JavaScript ライブラリのリストに追加されます。詳細については、「Sass および SCSS セレクター一式
PhpStorm は、ネストされたセレクター(英語)とアンパサンドで作成されたセレクター (&)(英語) を含む Sass および SCSS セレクターの補完も提供します。
![Sass および SCSS セレクターの完成 Completion for Sass and SCSS selectors](https://resources.jetbrains.com/help/img/idea/2024.1/style_sheets_completion_scss.png)
検索とナビゲーション
![Navigation for SCSS selectors](https://resources.jetbrains.com/help/img/idea/2024.1/style_sheets_go_to_definition.png)
ドキュメントの検索
プロパティと擬似要素については、PhpStorm は対応する MDN 記事からの要約を表示できます。この要約はドキュメントポップアップに表示され、プロパティとその値の簡単な説明、さまざまなブラウザーとの互換性に関する情報が表示されます。
![スタイルシートのクイックドキュメント: 互換性のあるブラウザーがリストされています Style sheets quick documentation: compatible browsers are listed](https://resources.jetbrains.com/help/img/idea/2024.1/ws_css_quick_doc_compatibility.png)
このプロパティがすべてのバージョンのブラウザーで使用可能な場合、PhpStorm はその互換性に関する情報を表示しません。
それ以外の場合、ドキュメントポップアップには、このプロパティをサポートするブラウザーとそのバージョンも一覧表示されます。
セレクターの場合、PhpStorm もその特異性(英語)を示します。
![ドキュメントの検索: 特異性 fpr セレクター Documentation look-up: specificity fpr selectors](https://resources.jetbrains.com/help/img/idea/2024.1/ws_css_quick_doc_specificity.png)
プロパティのドキュメントを表示
プロパティにキャレットを置き、Ctrl+Q を押すか、メインメニューから
を選択します。プロパティの上にマウスを移動すると、PhpStorm はすぐにその参照をドキュメントポップアップに表示します。
この動作をオフにすることも、ポップアップの表示を速くまたは遅くするように設定することもできます。以下のドキュメントポップアップの動作の構成を参照してください。
ドキュメントポップアップの動作を構成する
コードシンボルの上にマウスを移動したときにドキュメントの自動的な表示をオフにするには、ポップアップで
をクリックし、マウス移動時に表示するオプションを無効にします。
ドキュメントポップアップを速くまたは遅く表示するには、設定ダイアログ(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(英語) (Ctrl+Alt+Shift+P) を使用することもできます。詳細については、「Prettier」を参照してください。
リファクタリング
PhpStorm では、スタイルシートの式を変数に変換し、.css ファイルの var(--var-name)
構文、.scss および .sass ファイルの $
構文を使用してこれらの変数を導入できます。
![Style sheets: introducing a variable](https://resources.jetbrains.com/help/img/idea/2024.1/ws_css_extract_variable.png)
変数の導入
エディターで、変数に変換する式にキャレットを置き、Ctrl+Alt+V を押すか、コンテキストメニューまたはメインメニューから
を選択します。選択した式が複数出現する場合は、複数の出現箇所が見つかりましたリストからこの出現箇所だけを置換または出現箇所をすべて置換を選択してください。
.scss および .sass の場合、変数のグローバルスコープまたはローカルスコープを選択します。
赤い枠の付いたフィールドで、提案された変数名をそのまま使用するか、カスタム名を指定します。準備ができたら Enter を押します。
PhpStorm を使用すると、CSS、SCSS、Sass、Less ファイル内の既存の宣言から新しいルールセットを作成し、リファクタリングおよびインテンションアクションを使用してルールセット全体をファイル間で移動することさえできます。
ルールセットを導入する
導入する宣言を選択します。宣言が 1 つだけ必要な場合は、宣言の中にキャレットを置くだけです。
Alt+Enter を押し、リストからルールセットを導入を選択します。
PhpStorm は、同じセレクターを使用して新しいルールセットを作成し、それに選択された宣言を移動します。選択範囲にコメント、ネストしたセレクタなどが含まれている場合、それらも新しいルールセットに移動されます。
ルールセットを他のファイルに移動する
ルールセット内の移動する任意の場所にキャレットを置き、F6 を押します。
表示されたダイアログで、ルールセットを移動するファイルを指定します。指定されたファイルが存在しない場合、PhpStorm はそれを作成することを提案します。
デフォルトでは、PhpStorm はルールセットが移動されるファイルを自動的に開きます。この動作を変更するには、エディターで開くチェックボックスをオフにします。
コピー、移動、名前変更などの一般的なリファクタリングも利用できます。
![Rename refactoring](https://resources.jetbrains.com/help/img/idea/2024.1/ws_sass_rename.png)
ブラウザーとの互換性を確認する
ドキュメントポップアップで検索するだけでなく、その場で特定のブラウザーとの互換性についてスタイルシートのプロパティを確認できます。このインスペクションは MDN ブラウザー互換性データ(英語)に基づいており、対象のブラウザーのいずれかでプロパティがサポートされていない場合は常に警告を表示します。
![スタイルシートの互換性インスペクションポップアップ Style sheet compatibility inspection popup](https://resources.jetbrains.com/help/img/idea/2024.1/ws_css_documentation_lookup_check_compatibility_inspection_warning_popup.png)
互換性チェックをオンにする
設定ダイアログ(Ctrl+Alt+S)で、 に移動します。
CSS ノードを展開してプロパティに対するブラウザーの互換性を選択します。オプションエリアで、ターゲットにするブラウザーとその最小バージョンを選択します。
![CSS の互換性インスペクションの設定 CSS compatibility inspection settings](https://resources.jetbrains.com/help/img/idea/2024.1/ws_css_documentation_lookup_check_compatibility_inspection_settings.png)
色の値を変更する
PhpStorm を使用すると、16 進コードを入力せずにスタイルシートの色の値を簡単に変更できます。
![Editing color values in Style Sheets](https://resources.jetbrains.com/help/img/idea/2024.1/css_color.png)
色の選択
編集したいスタイルシートを開きます。
color:
と入力し、Ctrl+Space を押します。カスタムリストを選ぶには、候補リストまたは色の選択 ... から希望のカラー値を選択してください。
色の変更
編集するスタイルシートを開き、変更するカラープロパティを探します。
ガターの色アイコンをクリックします。
アイコンが表示されていない場合は、Alt+Enter を押してリストから色の変更を選択します。下記のガターにカラーアイコンを表示するにはを参照してください。
開いた色の選択ダイアログで、新しい色を選択し、選択をクリックします。
色のコードをプレビュー
ガターにカラーアイコンを表示する
デフォルトでは、PhpStorm はガターにカラーアイコンを表示します。それらが隠されている場合は、いつでも返却できます。
設定ダイアログ(Ctrl+Alt+S)で、 に移動します。ガターアイコンページが開きます。
共通領域で、色プレビューチェックボックスを選択します。
タグに適用されたスタイルを表示する
HTML および XHTML ファイルでは、PhpStorm は任意のタグに適用されたすべてのスタイルを表示できます。
![タグに適用されたスタイルの表示 <body> タグに適用されたスタイルの表示 <body>](https://resources.jetbrains.com/help/img/idea/2024.1/ws_show_styles.png)
タグのコンテキストメニューから
を選択します。PhpStorm は 2 つのペインで CSS スタイルツールウィンドウを開きます。左側のペインはタグのスタイルを示し、右側のペインはそれらの定義を示します。タグごとに、PhpStorm は別々のタブを開きます。
ツールウィンドウから、ソースコード内のタグとプロパティの定義に移動できます。
タグに移動するには、左側のペインのツールバーの
をクリックします。
プロパティの定義に移動するには、左側のペインでそれを選択し、右側のペインのツールバーの
をクリックします。
構文ハイライトの構成
好みや習慣に応じて CSS 対応の構文ハイライトを設定できます。
設定ダイアログ(Ctrl+Alt+S)で、 に移動します。
配色を選択するか、デフォルトから継承されたハイライト設定を受け入れるか、色とフォントの説明に従ってカスタマイズします。
関連ページ:
![](https://resources.jetbrains.com/help/img/idea/2024.1/ps_plugins_settings.png)
プラグインのインストール
プラグインは PhpStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains マーケッ...
![](https://resources.jetbrains.com/help/img/idea/2024.1/ws_js_configure_libraries_external_libraries_node.png)
JavaScript ライブラリを構成する
言語と IDE のコンテキストでは、ライブラリはファイルまたはファイルのセットです。これらのファイルの関数とメソッドは、編集したプロジェクトコードから PhpStorm が取得する関数とメソッドに加えて、PhpStorm の内部知識に追加されます。プロジェクトのスコープでは、そのライブラリはデフォルトで書き込み保護されています。PhpStorm は、2 つの事前定義された自動生成ライブラリフォルダーを予約します。node_modules プロジェクト package.json のオブジェクトにリストさ...
![](https://resources.jetbrains.com/help/img/idea/2024.1/ps_highlightUsages.png)
使用箇所を検索
コードを記述または編集するときに、変更または削除するコード要素に遭遇する場合があります。変更を行う前に、コード要素がどこで使用され、アプリケーションにどのように影響するかを確認することをお勧めします。使用箇所の検索アクションを使用すると、コードベース全体でコード要素の参照を検索できます。検索プロセスを管理し、単一のファイルのみで検索したり、検索をプロジェクト全体に拡張したり、特定の検索範囲を作成したりできます。さらに、使用箇所のハイライトの色を構成したり、用途の自動ハイライトを完全に無効にしたり...
![](https://resources.jetbrains.com/help/img/idea/2024.1/ps_recent_locations_popup.png)
ソースコードナビゲーション
さまざまなアクションやポップアップを使用して、エディター内のコードを素早く移動することができます。エディターウィンドウとツールウィンドウ間の移動に関する詳細情報については、エディターの基本を確認してください。PhpStorm で利用可能なナビゲーションオプションをチェックするためにビデオチュートリアルを見ることから始めることができます。キャレットで移動する後方に移動するには、を押します。前方に移動するには、を押します。最後に編集した場所に移動するには、を押します。エディターで現在のキャレッ
![](https://resources.jetbrains.com/help/img/idea/2024.1/reformat-glob-pattern.png)
コードの整形
PhpStorm を使用すると、現在のコードスタイルスキームまたは .editorconfig ファイルで指定した要件に従ってコードを再フォーマットできます。で定義されていないものがあれば、プロジェクト設定から取得されます。コードの一部、ファイル全体、ファイルのグループ、ディレクトリを再フォーマットできます。コードの一部または一部のファイルを再フォーマットから除外することもできます。コードフラグメントを再フォーマットするエディターで、再フォーマットしたいコードフラグメントを選択します。再フォーマット...
![](https://resources.jetbrains.com/help/img/idea/2024.1/ws_prettier_configuration_manual_mode.png)
Prettier
Prettier は、TypeScript、JavaScript、CSS、HTML、JSON などのさまざまな言語でファイルをフォーマットするツールです。PhpStorm では、Prettier で整形アクションを使用して、ファイルまたはディレクトリ全体だけでなく、選択したコードフラグメントもフォーマットできます。PhpStorm は、プロジェクト内の依存関係として、またはコンピューター上にグローバルに Prettier をインストールするとすぐに、このアクションを追加します。特定のファイルが変...