コードスタイル: CSS

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

タブとインデント

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

空白行

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

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

その他

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

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

配置

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

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

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

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

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

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

選択して設定

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

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

2026 年 6 月 12 日