IntelliJ IDEA 2019.2ヘルプ

スタイル・シート

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

スタイルシートのドキュメントを参照したり、ルールセットを作成および移動したり、変数を抽出したりすることもできます。

コード補完

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

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

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

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

Project-wide completion for Style Sheet symbols in HTML

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

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

Completion for Sass and SCSS selectors

検索とナビゲーション

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

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

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

ドキュメントのルックアップ

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

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

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

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

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

    Style sheets quick documentation: compatible browsers are listed

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

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

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

フォーマット

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

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

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

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

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

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

リファクタリング

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

変数を抽出するには

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

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

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

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

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

ルールセットを抽出するには

  1. 抽出する宣言を選択してください。宣言が1つだけ必要な場合は、キャレットをその中に置きます。

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

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

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

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

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

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

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

ブラウザとの互換性の確認

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

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

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

    CSS compatibility inspection settings

色の値を変更する

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

色を選択するには

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

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

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

色を変更するには

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

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

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

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

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

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

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

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

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

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

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

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

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

タグのコンテキストメニューからタグの適用されたスタイルを表示を選択します。

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

Viewing the styles applied to the tag<body>

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

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

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

構文の強調表示の設定

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

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

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

最終更新日: 2019年8月19日

関連ページ:

プロジェクト内のターゲットと使用箇所を検索する

プロジェクト内のテキスト文字列を検索したり、さまざまな範囲を使用して検索プロセスを絞り込んだり、検索から特定の項目を除外したり、使用箇所や出現箇所を見つけたりすることができます。プロジェクト内で検索文字列を探すメインメニューから を選択します。検索フィールドに、検索文字列を入力します。または、エデ...

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

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

再フォーマットとコードの並べ替え

IntelliJ IDEAでは、コード・スタイル設定で指定した要件に従ってコードを再フォーマットできます。設定にアクセスするには、設定/環境設定ダイアログ でに進みます。コードの一部、ファイル全体、ファイルのグループ、ディレクトリー、およびモジュールを再フォーマットできます。コードの一部または一部の...

Prettier

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

ガター・アイコン

WindowsとLinux用のmacOS用このページを使用して、基本的なIntelliJ IDEA全体の機能、または新しく作成されたすべてのエディターのフレームワークおよびテクノロジ固有の機能に関連するアクションを呼び出すアイコンを、ガター領域に表示または非表示にします。右側のペインはIntelli...

色とフォントの設定

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