RubyMine 2026.1 Help

CSS」}]} Recognize limitations, per instructions; only the value of

始める前に

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

コード補完

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

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

HTML タグ内の完全な CSS クラス名

HTML ファイルでは、RubyMine はまず style タグや リンク タグでリンクされたファイルからクラスと ID を提案します。 一致する結果が見つからない場合、RubyMine はプロジェクト内のすべてのスタイルシートファイルで定義されているシンボルも提案します。

スタイルブロック内で定義されたクラスの補完
リンクされた CSS ファイルで定義されたクラスの補完

プロジェクトで定義されているすべてのクラスと ID をすぐに表示するには、入力を開始する前に Ctrl+Space を 2 回押してください。

HTML のスタイルシートシンボルのプロジェクト全体の補完

テンプレートファイル内の完全な CSS クラス名

テンプレートファイル内の完全な CSS クラス名

JSX コード内の完全な CSS クラス名

CSS クラス名の完成

外部ライブラリからの完全な CSS クラス名

RubyMine を使うと、プロジェクトの依存関係に追加しなくても、CDN から HTML ファイルにリンクされている Twitter Bootstrap や他の CSS ライブラリのクラス名補完も利用できます。

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

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

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

CSS におけるクラウド補完と行全体補完

RubyMine は CSS コードで クラウド補完と 全文補完を提供します。

行全体コード補完機能は、ローカルで実行されるディープラーニングモデルを用いて、コード行全体を提案します。 RubyMine ではすぐに利用可能で、追加のライセンスは必要ありません。

スタイルシートで行全体コード補完を有効にする

  1. Ctrl+Alt+S を押して設定を開き、 エディター | 一般 | インライン補完 を選択します。

  2. ローカル補完の Full Line 候補を有効化する チェックボックスを選択し、 CSS のような チェックボックスが選択されていることを確認します。

    行全体補完を有効にする

AI Assistant を搭載したクラウド補完では、プロジェクトのコンテキストに基づいて単一の行、コードブロック、さらには関数全体もリアルタイムで自動補完できます。

Cloud Completion は、コンテキストを考慮して構文的に妥当なソリューションを提案し、さまざまな コードインスペクションを事前に実行して、エラーとなるバリエーションを除外します。

クラウド補完を有効にする

  1. AI Assistant プラグインをインストールして有効にします。

  2. Ctrl+Alt+S を押して設定を開き、 エディター | 一般 | インライン補完 を選択します。

  3. クラウド補完候補を有効化する チェックボックスを選択し、 HTML​​. チェックボックスが選択されていることを確認します。

    CSS でクラウド補完を有効にする

検索とナビゲーション

  • スタイルシートシンボルの使用箇所を見つけるには、キャレットをその位置に置き、 Alt+F7 を押します。 プロジェクトでの使用箇所の検索から詳細を参照してください。

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

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

ドキュメントの検索

プロパティや疑似要素については、RubyMine が対応する MDN 記事から概要を表示できます。 この概要は ドキュメント ポップアップに表示され、プロパティとその値の簡単な説明と、対応する Web プラットフォームのベースラインステータス(英語)が表示されます。

スタイルシートのクイックドキュメント: ベースライン、広く利用可能
スタイルシートのクイックドキュメント: ベースライン、新たに利用可能
スタイルシートのクイックドキュメント: ベースライン、限定的な利用可能

セレクターには、RubyMine でその 詳細度も表示されます。

ドキュメントの検索: 特異性 fpr セレクター

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

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

  • プロパティにマウスカーソルを合わせると、RubyMine がすぐに ドキュメント ポップアップでその参照を表示します。

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

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

  • コードシンボルの上にマウスを移動したときに自動でドキュメントを表示しないようにするには、ポップアップで 「オプションメニューを表示」アイコン をクリックし、 マウス移動時に表示する オプションを無効化します。

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

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

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

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

フォーマット

RubyMine の組み込みフォーマッターでは、スタイルシートコードの一部やファイル、フォルダー全体を、言語ごとのコードスタイル要件に合わせて整形できます。 また、フォーマッタはコードを生成またはリファクタリングする際に自動的に起動します。

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

    設定を変更すると、 プレビュー 領域に変更が書式にどのように影響するかが表示されます。

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

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

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

  • ファイルまたはフォルダーを再フォーマットするには、 プロジェクト ツールウィンドウ（Alt+1 ）で対象を選択し、 Ctrl+Alt+L を押します。 詳細については、 コードの再フォーマットと再配置を参照してください。

  • あるいは、 Prettier (Ctrl+Alt+Shift+P) を使用することもできます。

リファクタリング

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 リファクタリング

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

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

スタイルシートの互換性インスペクションポップアップ

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

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

  2. CSS」}]} Recognize limitations, per instructions; only the value of ノードを展開して プロパティは選択されたブラウザーと互換性がありません を選択します。 オプション エリアで、ターゲットにするブラウザーとその最小バージョンを選択します。

  3. オプション 領域で、プロパティの可用性を確認するブラウザーを選択します。 選択したブラウザーのターゲットバージョンを指定します。

CSS 互換性インスペクション設定

色の管理

RubyMine は CSS カラー の管理をサポートしており、 コード補完、 クイックドキュメント検索、 カラープレビュー などが利用できます。 絶対色、相対色、混合色のコーディング支援を提供します。

カラーマネジメントのためのコーディング支援

色を指定する

  • キャレットを 色 プロパティに置き、 Ctrl+Space を押して、目的の色の値を選択するか、 色を選択… を押してカスタムの色の値を選択します。

    色の選択

  • 人間が読みやすい色名の代わりにコードを使うには、 Alt+Enter を押してリストから 色を <カラーコードシステム> に変換； を選択します。ここで、<color code system> は HEX、 HSL、 HWB、 RGB、 lch、 oklch 、または oklab です。

    色名の代わりにコードを使用する

色の変更

  • ガター内のカラーアイコンをクリックし、ポップアップで目的の色を選択します。

    色を選ぶ

  • または、キャレットを色のプロパティに置き、 Alt+Enter を押して、リストから 色の変更 を選択し、ポップアップで目的の色を選択します。

    色の変更 - コンテキストメニュー

カラープレビューを切り替える

RubyMine は絶対色、相対色、混合色のプレビューを表示します。

カラープレビューの紹介

  • デフォルトでは、RubyMine はガターにカラープレビューをアイコンとして表示します。 背景にカラープレビューを表示するには、 設定 ダイアログ（Ctrl+Alt+S ）を開き、 エディター | 外観 に移動して CSS 色プレビューを背景として表示する チェックボックスをオンにします。

    背景にカラープレビューを表示する

  • カラープレビューガターアイコンを復元するには、 設定 ダイアログ (Ctrl+Alt+S) を開き、 エディター | 一般 | ガターアイコン に移動して、 共通 領域の 色プレビュー​ チェックボックスを選択します。

    ガターでカラープレビューを有効にする

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

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

body タグに適用されているスタイルの表示

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

    RubyMine は CSS スタイル ツールウィンドウを二分割表示で開き、左側のペインにはタグのスタイル、右側のペインにはその定義が表示されます。 各タグごとに、RubyMine は個別のタブを開きます。

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

    • タグに移動するには、左側のペインのツールバーの タグへ移動ツールバーボタン をクリックします。

    • プロパティの定義に移動するには、左側のペインでそれを選択し、右側のペインのツールバーの スタイルソースへ移動ボタン をクリックします。

構文ハイライトの構成

環境設定や使い方の習慣に合わせて、CSS 対応の構文ハイライトを設定できます。

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

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

2026 年 6 月 2 日
スタイルシートCSS の最小化