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