Salesforce Winter ’27適用後にExperience CloudのCSSが効かない？原因と対処方法を解説

投稿日： 2026.10.08
更新日： 2026.10.08

#Salesforce #Experience Cloud #Winter '27 #CSS

SalesforceのWinter ’27アップデート後、Experience Cloudで、
「これまで非表示にしていたボタンが表示されるようになった」
「カスタムCSSが一部効かなくなった」
「アップデート前と画面の表示が変わった」
といった事象が発生していないでしょうか。

フロッグウェルでも、Winter ’27適用後の一部環境において、
Experience Cloudで設定していたカスタムCSSがこれまでどおり適用されず、
非表示にしていたボタンや選択肢などが表示される事象を確認しました。

調査したところ、その一因として、
Salesforce Lightning Design System（SLDS）で使用される
CSSクラス名の記法変更が関係しているケースがあります。

この記事では、
なぜこれまでのCSSが効かなくなる場合があるのか、
どのように確認・修正すればよいのかを、
具体的な手順とともに解説します。

Winter ’27適用後に確認されたExperience Cloudの表示変化

Experience Cloudでは、標準コンポーネントの表示を調整するために、
Experience BuilderのCSSエディターからカスタムCSSを設定することができます。

たとえば、以下のような用途でカスタムCSSが利用されています。

• 特定のボタンを非表示にする
• 一部の選択肢を表示させない
• 余白やレイアウトを調整する

今回確認したケースでは、Winter ’27適用後、
これまでCSSによって非表示にしていた標準コンポーネントの要素が
再び表示される状態になりました。

CSSそのものが削除されたわけではなく、
CSSで指定しているクラス名と、Salesforce側で実際に使用されるクラス名が
一致しなくなったことで、CSSが適用されなくなったケースです。

原因の一つはSLDSのCSSクラス名の記法変更

Salesforceの公式ドキュメントでは、LWC API version 61.0以降、
SLDSのクラス名で使用されるModifierの記法について、
従来のダブルハイフン「--」から
アンダースコア「_」を使用する記法への変更が案内されています。

たとえば、従来次のようなクラス名だったものが、

.slds-button--icon-x-small

次のような記法になります。

.slds-button_icon-x-small

今回、Winter ’27適用後に標準コンポーネント側のクラス名が変化したことで、
従来のクラス名を直接指定していたカスタムCSSに影響が出たケースが確認されました。

なお、この「--」から「_」への記法変更自体を
Winter ’27固有の仕様変更として捉えるのではなく、
Winter ’27適用後に、既存のカスタムCSSへの影響が顕在化したケース
として考えるのが適切です。

参考：

Salesforce公式：Lightning Design System Considerations

Salesforce標準コンポーネントのCSSを直接指定している場合は注意

Salesforceでは、Experience BuilderのCSSエディターを利用して、
サイト全体にカスタムCSSを適用できます。

一方で、Salesforce標準コンポーネント内部のDOMやCSSクラスなどは、
Salesforceのアップデートによって変更される可能性があります。

そのため、Salesforce側で管理されているCSSクラスを直接指定している場合、
メジャーアップデートをきっかけとして、
それまで動作していたCSSが適用されなくなる可能性があります。

参考：

Salesforce公式：Use the CSS Editor for Custom CSS

Experience CloudのCSSを確認する方法

1．対象サイトのExperience Builderを開く

Salesforceの設定から、
[デジタルエクスペリエンス] ＞ [すべてのサイト]
を開きます。

対象となるExperience Cloudサイトの
[ビルダー]をクリックしてください。

2．「テーマ」を開く

Experience Builderを開いたら、
左側のメニューから[テーマ]を選択します。

テーマ画面では、色・画像・フォント・テーマレイアウトなど、
サイト全体のデザインに関する設定を確認できます。

3．「CSSを編集」を開く

テーマ画面右上のメニューを開き、
[CSSを編集]をクリックします。

「–」を使用しているCSSがないか確認する

CSSエディターを開いたら、
セレクターの中に「--」が含まれているCSSクラスがないか
確認します。

たとえば、次のようなCSSです。

.slds-button--icon-x-small {
    display: none;
}

このCSSでは、
.slds-button--icon-x-small
というクラスを持つ要素を非表示にしています。

しかしSalesforce側でクラス名が、

.slds-button_icon-x-small

に変化した場合、以前のCSSでは対象の要素を指定できなくなります。

その結果、
これまで非表示だったボタンなどが画面上に表示される
可能性があります。

CSSの修正方法

対象となるCSSが見つかった場合には、
新しいクラス名にも対応させます。

ただし、既存の「--」を
単純に「_」へ置き換えるのではなく、
新旧両方のクラス名に対応できる状態にしておく方法があります。

たとえば、修正前が次のCSSだったとします。

.slds-button--icon-x-small {
    display: none;
}

次のように、新旧両方のクラスを指定します。

.slds-button--icon-x-small,
.slds-button_icon-x-small {
    display: none;
}

こうしておくことで、

• 従来の「--」を使用したクラス
• 新しい「_」を使用したクラス

のどちらにも同じCSSを適用できます。

環境やコンポーネントによって新旧の記法が混在する可能性もあるため、
既存のCSSをすぐに削除するのではなく、
実際の表示を確認しながら対応することが重要です。

実際の修正手順

1. Salesforceの
   [設定] ＞ [デジタルエクスペリエンス] ＞ [すべてのサイト]
   を開きます。
2. 対象サイトの[ビルダー]をクリックします。
3. Experience Builderで[テーマ]を開きます。
4. 右上のメニューから[CSSを編集]をクリックします。
5. CSS内で、セレクターに「--」が含まれているCSSルールを確認します。
6. 該当するCSSルールをコピーします。
7. コピーしたCSSルールのセレクターに含まれる
   「--」を「_」へ変更します。
8. 既存の「--」を使用したCSSは削除せず、そのまま残します。
9. CSSを保存します。
10. 実際の画面で表示に問題がないことを確認したうえで、
    サイトを[公開]します。

修正後は周辺画面への影響も確認しましょう

CSSを修正した後は、問題が発生していた画面だけでなく、
同じCSSが適用される可能性のある他のページについても確認することをおすすめします。

たとえば、以下のような点を確認します。

• 非表示にしたいボタンが正しく非表示になっているか
• 本来表示する必要のあるボタンまで消えていないか
• リストビューや詳細画面など、別ページに影響していないか
• 必要に応じて、スマートフォン表示にも問題がないか

CSSセレクターを広い範囲で指定している場合、
意図していないコンポーネントにもスタイルが適用される可能性があります。

「CSSが再び効くようになった」という点だけでなく、
ほかの画面に意図しない影響が発生していないかまで
確認することが重要です。

Winter ’27になったらすべてのExperience Cloudで修正が必要？

すべてのExperience Cloud環境で、
今回のCSS修正が必要になるわけではありません。

今回の影響を受ける可能性があるのは、主に
Salesforce標準コンポーネントのSLDSクラスなどを直接指定して
カスタムCSSを設定している環境です。

以下のような場合には、一度確認してみるとよいでしょう。

• Experience Cloudで独自のCSSを設定している
• CSS内に.slds-から始まるクラスを直接記述している
• Winter ’27適用後に画面表示が変わった
• 以前非表示だったボタン・メニュー・選択肢が表示されるようになった
• CSSを変更していないにもかかわらずレイアウトが変わった

一方で、現在特に表示上の問題が発生していない場合、
Winter ’27だからという理由だけで、必ずCSSを修正する必要はありません。

まずは現在の画面表示を確認し、
必要に応じてカスタムCSSの内容を確認するとよいでしょう。

今後のSalesforceアップデートでも注意が必要

今回のポイントは、
単に「--を_へ変更すれば終わり」
ということだけではありません。

Experience Cloudの標準コンポーネント内部のクラスやDOM構造を
直接指定したカスタムCSSは、
今後のSalesforceアップデートでも影響を受ける可能性があります。

そのため、Experience Cloudを継続的に運用している場合には、
Salesforceのメジャーアップデート時に、以下のような箇所を確認しておくことをおすすめします。

• 主要画面の表示
• 独自に表示・非表示を制御している項目
• カスタムCSS
• カスタムコンポーネント

まとめ

Winter ’27適用後、Experience Cloudでこれまで使用していた
カスタムCSSが効かなくなった場合には、
CSSで直接指定しているSalesforce標準コンポーネントのクラス名
を確認してみてください。

今回確認したケースでは、
SLDSクラス名の「--」と「_」の違いによって、
従来のCSSが適用されなくなっていました。

対応する場合は、既存のCSSをすぐに削除するのではなく、
新旧両方のクラス名に対応させたうえで、
実際の画面表示を確認することが重要です。

また、Experience CloudのCSSや標準コンポーネントへのカスタマイズは、
環境によって実装内容が異なります。

「自社のExperience Cloudも影響を受けているかわからない」
「どのCSSを修正すればよいかわからない」
「Salesforceのアップデート後から表示がおかしくなった」

といった場合は、フロッグウェルまでお気軽にご相談ください。

フロッグウェルでは、Salesforceの新規導入だけでなく、
既存環境の運用・保守、Experience Cloudの構築・改修についてもご支援しています。

参考情報

• Salesforce公式：Lightning Design System Considerations
  
• Salesforce公式：Use the CSS Editor for Custom CSS