CSS
始める前に
設定で CSS プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 を選択します。 検索フィールドに CSS と入力します。 プラグインの詳細については、 プラグインの管理を参照してください。
コード補完
GoLand は、プロパティ、その値、セレクター、変数、ミックスインに対してコード補完を提供します。
CSS クラスと ID の補完機能は、HTML ファイル、さまざまな種類のテンプレート（たとえば、Angular や Vue.js）、JSX コードで利用できます。
HTML タグ内の完全な CSS クラス名
HTML ファイルでは、GoLand はまず style タグおよび link タグでリンクされたファイルからクラスや ID を提案します。 一致する結果が見つからない場合は、GoLand はプロジェクト内のすべてのスタイルシートファイルで定義されているシンボルも提案します。
プロジェクトで定義されているすべてのクラスと ID をすぐに表示するには、入力を開始する前に Ctrl+Space を 2 回押してください。
テンプレートファイル内の完全な CSS クラス名
JSX コード内の完全な CSS クラス名
外部ライブラリからの完全な CSS クラス名
GoLand を使うと、HTML ファイル内で CDN からリンクされた Twitter Bootstrap や他の CSS ライブラリのクラス名の補完も、これらのライブラリをプロジェクトの依存関係に追加することなく利用できます。
外部 CSS ライブラリへの CDN リンクを含む HTML ファイルを開きます。 GoLand はリンクをハイライトします。
ライブラリの補完を有効にするには、リンク上で Alt+Enter を押し、リストから を選択します。 または、リンクの上にマウスを置き、 ライブラリをダウンロード をクリックします。
CSS の行全体補完
GoLand は CSS コードで 行全体補完を提供します。 行全体コード補完機能は、ローカルで実行されるディープラーニングモデルを用いて、コード行全体を提案します。 GoLand ですぐに利用でき、追加のライセンスは必要ありません。
スタイルシートで行全体コード補完を有効にする
Ctrl+Alt+S を押して設定を開き、 エディター | 一般 | コード補完 | インライン を選択します。
言語モデルを使ったインライン補完の有効化 チェックボックスを選択し、 ローカル オプションが選択されていることを確認します。
モデルがインストールされていない場合は、まず ダウンロード の横にある CSS のような をクリックします。 設定ページ全体については、 行全体補完設定を参照してください。
CSS のような チェックボックスが 提案の表示対象を選択 エリアで選択されていることを確認してください。
検索とナビゲーション
ドキュメントの検索
プロパティや疑似要素については、GoLand は対応する MDN 記事から概要を表示できます。 この概要は ドキュメント ポップアップに表示され、プロパティとその値の簡単な説明と、対応する Web プラットフォームのベースラインステータス(英語)が表示されます。
セレクターについては、GoLand もその 詳細度を表示します。
プロパティのドキュメントを表示
プロパティにキャレットを置き、 Ctrl+Q を押すか、メインメニューから を選択します。
プロパティの上にマウスを重ねると、GoLand が直ちに ドキュメント ポップアップでリファレンスを表示します。
この動作をオフにすることも、ポップアップの表示を速くまたは遅くするように設定することもできます。以下の ドキュメントポップ上への動作の構成を参照してください。
ドキュメントポップアップの動作を設定する
コードシンボルにカーソルを合わせたときにドキュメントを自動的に表示しないようにするには、ポップアップで
をクリックし、 マウス移動で表示する オプションを無効化します。ドキュメント ポップアップを速くまたは遅く表示するには、 設定 ダイアログ（Ctrl+Alt+S ）を開き、 に移動し、 ドキュメントのポップアップを表示する チェックボックスを選択して遅延時間を指定してください。
ブラウザーで MDN ドキュメントを開く
ドキュメント ポップアップ Ctrl+Q で、下部にあるリンクをクリックします。
Shift+F1 を押すか、メインメニューから を選択します。
リファクタリング
GoLand を使うと、スタイルシート内の式を変数に変換し、 .css ファイルでは var(--var-name) 構文、 .scss および .sass ファイルでは $ 構文で変数を導入できます。
変数の導入
エディターで、変数に変換する式にキャレットを置き、 Ctrl+Alt+V を押すか、コンテキストメニューまたはメインメニューから を選択します。
選択した式が複数出現する場合は、 複数の出現箇所が見つかりました リストから この出現箇所だけを置換 または 出現箇所をすべて置換 を選択してください。
.scss および .sass の場合、変数の グローバルスコープまたは ローカルスコープを選択します。
赤い枠の付いたフィールドで、提案された変数名をそのまま使用するか、カスタム名を指定します。 準備ができたら Enter を押します。
GoLand を使うと、CSS、SCSS、Sass、Less ファイルの既存の宣言から新しいルールセットを作成し、リファクタリングやインテンションアクションでルールセット全体をファイル間で移動することも可能です。
ルールセットを導入する
導入する宣言を選択します。 宣言が 1 つだけ必要な場合は、宣言の中にキャレットを置くだけです。
Alt+Enter を押し、リストから ルールセットの導入 を選択します。
GoLand は同じセレクターの新しいルールセットを作成し、選択した宣言をその中に移動します。 選択範囲にコメント、ネストしたセレクタなどが含まれている場合、それらも新しいルールセットに移動されます。
ルールセットを他のファイルに移動する
ルールセット内の移動する任意の場所にキャレットを置き、 F6 を押します。
表示されたダイアログで、ルールセットを移動するファイルを指定します。 指定したファイルが存在しない場合、GoLand はその作成を提案します。
デフォルトでは、GoLand はルールセットが移動されたファイルを自動的に開きます。 この動作を変更するには、 エディターで開く チェックボックスをオフにします。
コピー、 移動、 名前変更などの一般的なリファクタリングも利用できます。
ブラウザーとの互換性を確認する
ドキュメントポップアップで検索するだけでなく、その場で特定のブラウザーとの互換性についてスタイルシートのプロパティを確認できます。 このインスペクションは MDN ブラウザー互換性データ(英語)に基づいており、対象のブラウザーのいずれかでプロパティがサポートされていない場合は常に警告を表示します。
互換性チェックをオンにする
設定 ダイアログ（Ctrl+Alt+S ）で に移動します。
CSS ノードを展開して プロパティは選択されたブラウザーと互換性がありません を選択します。 オプション エリアで、ターゲットにするブラウザーとその最小バージョンを選択します。
オプション 領域で、プロパティの可用性を確認するブラウザーを選択します。 選択したブラウザーのターゲットバージョンを指定します。
色の管理
GoLand は CSS カラー管理をサポートしており、 コード補完、 クイックドキュメント参照、 カラープレビュー などが利用できます。 絶対色、相対色、混合色に対するコーディング支援が提供されます。
色を指定する
色の変更
ガター内のカラーアイコンをクリックし、ポップアップで目的の色を選択します。
または、キャレットを色のプロパティに置き、 Alt+Enter を押して、リストから 色の変更 を選択し、ポップアップで目的の色を選択します。
カラープレビューを切り替える
GoLand は絶対色、相対色、混合色のプレビューを表示します。
デフォルトでは、GoLand はカラープレビューをガター内にアイコンとして表示します。 背景にカラープレビューを表示するには、 設定 ダイアログ（Ctrl+Alt+S ）を開き、 に移動して CSS 色プレビューを背景として表示 チェックボックスをオンにします。
カラープレビューガターアイコンを復元するには、 設定 ダイアログ (Ctrl+Alt+S) を開き、 に移動して、 共通 領域の 色プレビュー チェックボックスを選択します。
タグに適用されたスタイルを表示する
HTML および XHTML ファイルでは、GoLand は任意のタグに適用されているすべてのスタイルを表示できます。
タグのコンテキストメニューから を選択します。
GoLand は CSS スタイル ツールウィンドウを 2 つのペインで開き、左側のペインにタグのスタイル、右側のペインにその定義を表示します。 タグごとに、GoLand は別タブで開きます。
ツールウィンドウからソースコード内のタグやプロパティ定義にナビゲートできます。
タグに移動するには、左側のペインのツールバーの
をクリックします。プロパティの定義に移動するには、左側のペインでそれを選択し、右側のペインのツールバーの
をクリックします。
構文ハイライトの構成
環境設定や習慣に合わせて CSS 対応の構文ハイライトを設定できます。
設定 ダイアログ（Ctrl+Alt+S ）で に移動します。
カラースキームを選択するか、デフォルトから継承されたハイライト設定を受け入れるか、 色とフォント で説明されているようにカスタマイズします。