RubyMine 2024.1 ヘルプ

スタイルシート

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

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

始める前に

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

コード補完

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

Style Sheets: basic code completion

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

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

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

Project-wide completion for Style Sheet symbols in HTML

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

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

Enabling completion for an external CSS library

  1. 外部 CSS ライブラリへの CDN リンクを含む HTML ファイルを開きます。RubyMine はリンクをハイライトします。

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

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

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

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

Completion for Sass and SCSS selectors

検索とナビゲーション

Navigation for SCSS selectors

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

  • スタイルシートシンボルの使用箇所からその定義に移動するには、Ctrl+B を押します。定義へのナビゲーションは、変数やミックスインだけでなく、クラス、ID、セレクター (ネストされたセレクターやアンパサンド & を含むセレクターを含む) に対しても利用できます。

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

ドキュメントの検索

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

Style sheets quick documentation: compatible browsers are listed

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

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

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

Documentation look-up: specificity fpr selectors

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

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

  • プロパティの上にマウスを移動すると、RubyMine はすぐにその参照をドキュメントポップアップに表示します。

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

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

  • コードシンボルの上にマウスを置いたときにドキュメントが自動的に表示されるのをオフにするには、ポップアップで the Show Options Menu icon をクリックし、マウス移動時に表示するオプションを無効にします。

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

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

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

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

フォーマット

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

  • スタイルシート言語のフォーマットを構成するには、設定ダイアログ（Ctrl+Alt+S）を開き、エディター | コードスタイル | スタイルシート | <あなたのスタイルシートの言語> に移動して、タブとインデント、スペース、中括弧と中括弧、ハードマージンとソフトマージンなどの言語固有の設定を構成します。

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

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

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

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

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

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

リファクタリング

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

Style sheets: introducing a variable

変数の導入

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

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

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

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

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

ルールセットを導入する

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

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

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

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

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

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

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

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

Rename refactoring

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

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

Style sheet compatibility inspection popup

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

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

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

CSS compatibility inspection settings

色の値を変更する

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

Editing color values in Style Sheets

色の選択

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

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

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

色の変更

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

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

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

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

色のコードをプレビュー

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

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

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

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

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

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

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

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

Viewing the styles applied to the tag <body>" src="https://resources.jetbrains.com/help/img/idea/2024.1/ws_show_styles.png" class="article__border-element" title=" タグに適用されたスタイルの表示 <body>" data-dark-src="https://resources.jetbrains.com/help/img/idea/2024.1/ws_show_styles_dark.png" width="600" height="200" /></figure><section class=

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

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

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

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

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

構文ハイライトの構成

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

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

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

Lint TypeScript CSS の最小化

関連ページ：

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

プラグインは RubyMine のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して IDE 設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains...

JavaScript ライブラリを構成する

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

使用箇所を検索

コードを記述または編集するときに、変更または削除するコード要素に遭遇する場合があります。変更を行う前に、コード要素がどこで使用され、アプリケーションにどのように影響するかを確認することをお勧めします。使用箇所の検索アクションを使用すると、コードベース全体でコード要素の参照を検索できます。検索プロセスを管理し、単一のファイルのみで検索したり、検索をプロジェクト全体に拡張したり、特定の検索範囲を作成したりできます。さらに、使用箇所のハイライトの色を構成したり、用途の自動ハイライトを完全に無効にしたり...

コードナビゲーション

さまざまなアクションやポップアップを使用して、エディター内のコードを素早く移動することができます。RubyMine で利用可能なナビゲーションオプションをチェックするためにビデオチュートリアルを見ることから始めることができます。キャレットで移動する後方に移動するには、を押します。前方に移動するには、を押します。最後に編集した場所に移動するには、を押します。エディターで現在のキャレット位置を見つけるには、Ctrl+M を押します。大きなファイルをスクロールしたくない場合は、このアクションが役立

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

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

Prettier

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