コードスタイル: CSS

このページを使用して、CSS ファイルのフォーマットオプションを設定します。これらの設定を変更すると、プレビューペインに、コードへの影響が表示されます。

タブとインデント

タブ文字を使用する	このチェックボックスを選択すると、タブ文字が使用されます： `Tab` キー押下時インデント用コードを再フォーマットするためチェックボックスがオフの場合、PyCharm はタブではなくスペースを使用します。
スマートタブ	インデントは 2 つの部分で構成されます。 1 つの部分はコードブロックのネストに起因し、他の部分はアライメントによって決定されます。このチェックボックスを選択すると、ネストによって生じる部分には（必要に応じて）タブとスペースの両方が含まれ、alignment で定義される部分はスペースのみで構成されます。このチェックボックスをオフにすると、タブのみが使用されます。これは、指定されたタブサイズに合うスペースのグループを再フォーマットした後、自動的にタブに置き換えられることを意味します。タブ文字を使用するチェックボックスが選択されている場合は、スマートタブチェックボックスが使用可能です。
タブサイズ	このフィールドで、タブに収まるスペースの数を指定します。
インデント	このフィールドでは、各インデントレベルに挿入されるスペースの数を指定します。
連続インデントの文字数	このフィールドでは、プロパティの値の間に挿入するスペースの数を指定します。
空行でインデントを保持する	このチェックボックスが選択されている場合、PyCharm は空行のインデントを、あたかも何らかのコードが含まれているかのように保持します。チェックボックスをオフにすると、PyCharm は空行のタブ文字とスペースを削除します。

空白行

このタブを使用して、再フォーマット後に PyCharm が保持および挿入する空白行の数と場所を定義します。結果はプレビューペインに表示されます。

空白行の指定	この領域では、再フォーマット後に保持する余白行数を指定します。
最小の空白行数	この領域で、最上位ブロックとネストしたセレクターの周囲に余分な空行を追加するかどうかを構成します。各オプションの横にあるフィールドで、追加する空白行の最小数を指定します。

その他

このタブでは、再フォーマットに適用される配置、中括弧、スペース、引用符のオプションを指定します。

波括弧の配置	このリストを使用して、PyCharm がセレクターの左中括弧を配置する場所を指定します。利用可能なオプションは次のとおりです：行末次の行
値の配置	このリストを使用して、PyCharm が属性と値をどのように揃えるかを指定します。利用可能なオプションは次のとおりです：揃えない: このオプションを選択して、属性名の最初の文字の位置合わせを指定します。値の位置: このオプションを選択して、属性値の最初の文字の位置合わせを指定します。コロンの位置
引用符	CSS、SCSS、Less コンテキストでは、PyCharm はデフォルトで、 `import` ステートメントおよび URL で生成された文字列リテラルに二重引用符を使用します。単一引用符を使用するには、このリストから単一を選択します。再フォーマット後に選択したスタイルをファイル全体に適用するには、リストの整形時に強制するチェックボックスを選択します。現在、引用符の構成を変更しても、 `<style>` タグ内に挿入されたスタイルシートと CSS コードには影響しません。
右波括弧をプロパティに揃える	このチェックボックスが選択されている場合、セレクターの閉じ中括弧はプロパティのリストの下に配置されます。このチェックボックスが選択されていない場合、セレクターの閉じ中括弧はセレクターの下に配置されます。
一行のブロックを保持する	このチェックボックスを選択すると、単一のプロパティを持つブロックは行が制限されます。このチェックボックスが選択されていない場合、各プロパティは独自の行に配置されます。
スペース	この領域のチェックボックスをオンにして、コロンで区切られたキーと値の後、セレクタの左中括弧の前にスペースを追加します。
コメント	この領域のコントロールを使用して、行コメントとブロックコメント、およびそれらの内部のスペースの位置を構成します。 Add spaces around block comments: ブロックコメントに先頭と末尾のスペースを追加するには、このチェックボックスを選択します。デフォルトでは、コードフラグメントをブロックコメントで囲むと、テキストはスペースなしで `/` 文字を開いた直後に始まります。 `/` 文字を閉じる前に、スペースも挿入されません。このデフォルトのコードスタイルは、ESLint などの一部のリンターのルールと競合する可能性があります。
16 進数の色	この領域を使用して、16 進カラー構文を設定します。以下のチェックオプションから選択できます。 hex カラーを変換: このチェックボックスを選択して、16 進カラーの大文字小文字を設定します。小文字または大文字を選択できます。 hex カラーフォーマットを変換: このチェックボックスを選択して、16 進カラーフォーマットの長さを設定します。長いフォーマットまたは短いフォーマットを選択できます。プレビューペインで変更を表示します。

配置

このタブで、CSS プロパティの並べ替えを有効にします（デフォルトではオフになっています）。並べ替えの順序を選択します。

並べ替えを有効にするには、 CSS プロパティをソートするチェックボックスを選択します。
各ブロック内のすべての CSS プロパティをアルファベット順に並べ替えるには、名前を選択します。 PyCharm はベンダー固有の接頭辞を無視しますが、特定の CSS プロパティに対する複数のベンダー固有の接頭辞はアルファベット順で保持されます。
border: 1px solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; color: black;
独自の並べ替え方法を定義するには、カスタム順オプションを選択し、その隣のフィールドに希望の並べ替え順序を指定します。
区切り文字としてコンマとスペースを使用し、PyCharm は常にプレフィックスなしの対応するものとグループ化するため、ベンダー固有のプロパティはスキップされます。そのようなグループ内では、プロパティはベンダー接頭辞でソートされ、接頭辞のないものが最後になります。
カスタム順リストでは正規表現を使用できます。たとえば、 .* は任意のプロパティに一致します。
PyCharm は変更されたカスタム順リストを記憶し、カスタムソートをオフにしてからオンにすると復元します。

ファイル内のすべての CSS プロパティをソートする

メインメニューでコード | コードの再配置へ移動します。
あるいは、メインメニューでコード | ファイルの整形に移動し、表示されるダイアログでファイル全体およびコードの再配置を選択します。

ブロック内の CSS プロパティを並べ替えるには

ソートするブロックを選択してから、メインメニューからコード | コードの再配置を選択します。
あるいは、メインメニューでコード | ファイルの整形に移動し、表示されるダイアログでコードの再配置を選択します。

選択して設定

該当する場合、リンクはページの右上隅に表示されます。このリンクをクリックして、現在の言語コードスタイルのベースとして使用する言語を選択します。

コードスタイル設定の初期セットに戻り、変更を破棄するには、リセットをクリックします。

2026 年 6 月 1 日