背景色と背景画像
background-colorプロパティとbackground-imageプロパティを使って、背景色と背景画像を適用します。
「背景色と背景画像」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
background-color
background-colorプロパティは、要素の背後に単色を設定します。任意のCSSカラー値を指定でき、背景画像の透明な部分からも表示されます。
<div class="hero">Hero section</div>
background-image
background-imageは、要素の背景として1つ以上の画像を設定します。画像はbackground-colorの上に重ねて表示されます。
<div class="banner">Banner (image missing → fallback color shows)</div>
background-size
background-sizeは画像のサイズを制御します。主な値は次のとおりです。
cover— 領域全体を埋め、必要に応じて画像を切り取りますcontain— 画像全体を収めますが、余白ができる場合があります100% 100%— 領域全体にぴったり合うよう引き伸ばします
<div class="hero"></div>
background-position
background-positionは画像を配置する位置を設定します。キーワード、パーセント値、長さの値を使用できます。
<div class="hero"></div>
background-repeat
画像はデフォルトでタイル状に繰り返されます。background-repeatで繰り返し方を制御できます。
<div class="hero"></div>
<div class="pattern"></div>
background-attachment
background-attachmentは、画像をページのスクロールに合わせて動かすかどうかを決めます。fixedではパララックスのような効果が生まれ、scrollがデフォルトです。
<div class="spacer">Scroll down ↓</div>
<div class="parallax">Fixed background</div>
<div class="spacer">Scroll up ↑</div>
複数の背景
CSSでは、カンマで区切った複数の背景レイヤーを指定できます。最初に記述したレイヤーが最前面に表示されます。
<div class="card">Overlay + photo layers</div>
backgroundショートハンド
backgroundショートハンドを使うと、すべての背景プロパティを1つの宣言にまとめられます。サイズを指定する場合は順序が重要で、位置の後に/で区切って記述します。
<div class="hero"></div>
背景のクリップと原点
background-clipは、ボックスモデルのどの範囲に背景を描画するかを制御します。background-originは、位置指定の基準点を設定します。
<div class="card">Clip & Origin</div>
テキストへの背景クリップ
テキストの形に背景画像やグラデーションを切り抜くには、テキストの色を透明にしてbackground-clip: textを使用します。
<h1>Gradient Text</h1>
<img>とbackground-imageにおけるobject-fit
<img>タグでは、background-imageの代わりにobject-fit: coverとobject-positionを使用します。これにより、アクセシビリティとSEOのために画像をDOM内に保持できます。
<img class="hero-img" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='800'><rect width='400' height='800' fill='%23ff6347'/><circle cx='200' cy='200' r='150' fill='%231e90ff'/></svg>" alt="hero" />
確認問題
領域全体を埋め、余白を残すのではなく画像を切り取るbackground-sizeの値はどれですか。
まとめ
画像の下にフォールバックとしてbackground-colorを指定します。全面表示のヒーロー画像には、background-size: coverが定番です。複数の背景レイヤーを使うと、画像を重ねて合成できます。ショートハンドを使えば、すべての背景プロパティを簡潔にまとめられます。
AI チューターと学ぶ CSS — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 40
- レッスン
- 159
よくある質問
「背景色と背景画像」レッスンは無料ですか？
はい。「背景色と背景画像」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「背景色と背景画像」で何を学びますか？
background-colorプロパティとbackground-imageプロパティを使って、背景色と背景画像を適用します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「背景色と背景画像」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。