スタイルシート

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

変数の導入

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

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

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

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

ルールセットを導入する

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

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

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

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

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

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

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

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

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

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

色の選択

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

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

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

色の変更

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

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

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

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

色のコードをプレビュー

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

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

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

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

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

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

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

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

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

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

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

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

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