GoLand 2026.1 Help

CSS

始める前に

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

コード補完

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

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

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

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

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

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

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

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

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

CSS クラス名の完成

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

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

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

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

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

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

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

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

  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、セレクター (ネストされたセレクターやアンパサンド & を含むセレクターを含む) に対しても利用できます。

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

ドキュメントの検索

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

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

セレクターについては、GoLand もその 詳細度を表示します。

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

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

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

  • プロパティの上にマウスを重ねると、GoLand が直ちに ドキュメント ポップアップでリファレンスを表示します。

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

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

  • コードシンボルの上にマウスを重ねたときにドキュメントが自動表示されるのを無効化するには、ポップアップで 「オプションメニューを表示」アイコン をクリックし、 マウス移動で表示する オプションをオフにしてください。

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

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

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

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

リファクタリング​​

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

変数の導入

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

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

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

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

GoLand を使うと、CSS、SCSS、Sass、Less ファイルの既存の宣言から新しいルールセットを作成し、リファクタリングやインテンションアクションでルールセット全体をファイル間で移動することも可能です。

ルールセットを導入する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

色の管理

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

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

色を指定する

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

    色の選択

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

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

色の変更

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

    色を選ぶ

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

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

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

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

カラープレビューの紹介

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

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

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

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

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

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

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

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

    ツールウィンドウからソースコード内のタグやプロパティ定義にナビゲートできます。

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

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

構文ハイライトの構成

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

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

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

2026 年 5 月 22 日
スタイルシート​​CSS の最小化