CSSを使っていて「うまくいかない…」「想像と違う…」と感じた経験、ありませんか？
特に、ウェブサイトに写真を飾ったり、色をきれいに混ぜ合わせたりするための設定は、初心者にもベテランにも混乱を招きやすいポイントです。
この記事では、よくある誤解の原因を分かりやすく解説し、CSSの背景画像サイズやグラデーションの挙動を正しく理解するための基礎知識を紹介します。
背景画像が切れる？「contain」と「cover」の決定的な違い
まずは背景画像のサイズ指定に関する問題です。画像をボックスに表示させたいとき、containとcover、どちらを使うべきか迷ったことはありませんか？
background-size: contain; は、どのような表示になる？
選択肢：
- A. 画像全体が枠にきれいに収まるように縮小・拡大される
- B. 画像が枠からはみ出しても、枠全体を覆うように拡大される
- C. 画像の縦横比を無視して、枠いっぱいに引き伸ばされる
- D. 画像が元のサイズで表示される（調整なし）
正解：A. 画像全体が枠にきれいに収まるように縮小・拡大される
解説：
background-size: contain; は、画像の縦横比を保ちながら、画像全体が親要素（枠）の中に収まる最大のサイズに調整されます。
このため、画像が切れることはありませんが、枠内に空白（余白）が発生する可能性があります。
background-size: cover; の場合：
正解の B に該当します。画像の縦横比を保ちつつ、要素全体を覆うサイズに拡大されます。この時、画像の一部が切れてしまう可能性があるので、デザイン意図に沿っているか注意が必要です。
グラデーション指定も意外と誤解されている！
CSSのグラデーション指定は、シンプルなようで理解に差が出やすいポイントです。
このグラデーションは、どっち向きに変化する？
background: linear-gradient(red, blue);
選択肢：
- A. 赤から青へ、上から下に向かって変化する
- B. 赤から青へ、下から上に向かって変化する
- C. 赤から青へ、左から右に向かって変化する
- D. 赤から青へ、右から左に向かって変化する
正解：A. 赤から青へ、上から下に向かって変化する
解説：
linear-gradient() は、方向を指定しないと「上から下」にグラデーションがかかるというCSSの初期設定があります。
つまり、「上に赤、下に青」という表示になります。これはCSSが、方向の記述がなかったときに 自動で「to bottom」を指定してくれるからです。
先輩A現場エピソード：FigmaやIllustratorでデザインされたグラデーションが、実装したら上下逆になってしまった…という事例は多くあります。これは、デザインツールとCSSの方向指定のデフォルトが異なることがあるためです。
【現場あるある】CSSの背景設定で困った話
画像がはみ出して怒られた
ある案件で、「背景画像が途中で切れてるよ！」とクライアントに言われ、慌てて確認したところ、background-size: cover; を指定していたことが原因でした。
画像を画面全体に広げたかったのですが、そのせいで一部がトリミングされてしまっていたのです。coverは便利ですが、画像全体が見える保証はないということを知らないと、こうしたトラブルに繋がります。
グラデーションの方向を逆にして怒られた
「上から赤、下が青にしてね」と言われて作ったはずが、「上下逆だよ！」と指摘されたことがあります。
確認すると、linear-gradient(blue, red) と色の順番を逆にして書いていたことが原因でした。
グラデーションは 色の順番が視覚に直結する ので、要注意です。
まとめ：CSSあるあるを減らすコツ
背景画像やグラデーションは、CSSでデザイン性を上げる重要な武器です。
しかし、指定の意図と実際の効果がズレていると、トラブルの元になります。
背景とグラデーションを正しく扱うポイント：
- 背景画像サイズは 「contain」と「cover」の違いを明確に理解する
- グラデーションの 方向と色の順序に注意する
- デザインツールと実装で仕様のズレを意識する
- クライアントやチームとのやりとりでは、見た目の確認をしっかり行う
CSSの奥深さは、正しく学べば大きな武器になります。
「なんとなく指定」ではなく、「意図して設計・実装する」習慣を、ここから始めてみましょう。
