LWR（Lightning Web Runtime）サイトを構築していて、こんな現象に悩まされたことはありませんか？
「テーマ設定で背景色を変更したのに、長いページだと途中で色が切れて白くなってしまう……」
プレビュー画面や公開サイトでスクロールしてみると、ある地点（ちょうど画面の高さ分くらい）から下が、設定した色ではなくデフォルトの白色になってしまう現象です。
今回は、この「背景色足らず問題」の原因と、コピペで直せる簡単な解決法をご紹介します。
原因：標準スタイルの height: 100%
結論から言うと、原因はLWRサイトが標準で持っているグローバルスタイルの定義にあります。 ブラウザの開発者ツールで確認すると、以下のようなCSSが標準で当たっていることがわかります（sfsites/c/cms/delivery/media/... などの内部リソース）。
/*
* 標準で定義されているスタイルの一部
*/
html,
body {
height: 100%; /* ← これが犯人です */
}
html {
background: white;
}
body {
margin: 0;
}
この height: 100%; という指定があるため、body 要素の高さが「ブラウザのウィンドウの高さ（ビューポートの高さ）」に固定されてしまっています。 その結果、コンテンツが画面の縦幅を超えて長く続いている場合でも、body 自体は画面の高さまでしか伸びず、背景色もそこで終わってしまうのです。
解決法：ヘッドマークアップで高さを unset する
解決方法はシンプルです。標準のスタイルを上書きして、高さの制限を解除してあげましょう。 以下の手順で設定を行います。
- エクスペリエンスビルダーを開きます。
- 左側のメニューから [設定] (歯車アイコン) > [詳細] をクリックします。
- [ヘッドマークアップを編集] ボタンをクリックします。
- 以下のコードをそのまま貼り付けて保存してください。
<style>
body {
height: unset;
}
</style>これで body 要素の高さがコンテンツに合わせて伸びるようになり、ページの一番下まで綺麗に背景色が適用されるはずです。
💡 ワンポイント：短いページへの対策
上記の height: unset; だけで解決する場合がほとんどですが、逆に「コンテンツが極端に少ない（画面半分しかない）ページ」がある場合、今度は背景色が画面下まで届かなくなる可能性があります。
どのページでも確実に全画面をカバーしたい場合は、以下のように min-height（最小の高さ）も合わせて指定しておくと完璧です。
<style>
body {
height: unset; /* 上限固定を解除（長いページ用） */
min-height: 100vh; /* 最低でも画面いっぱいは確保（短いページ用） */
}
</style>まとめ
LWRは高速で柔軟ですが、従来のAuraサイトとは異なるCSSの挙動に戸惑うこともありますよね。 「背景色が切れる！」と思ったら、まずはこの設定を試してみてください。
読者の声