CSS レッスン5
背景・グラデーション
background-color、background-image、グラデーションで美しい背景を作ろう
背景関連プロパティ
CSSの背景プロパティを使えば、色・画像・グラデーションなど多彩な背景を設定できます：
background-color- 背景色を指定background-image- 背景画像やグラデーションを指定linear-gradient()- 直線的なグラデーションradial-gradient()- 放射状のグラデーションbackground-size- 背景のサイズ（cover, contain など）background-position- 背景の位置
背景色と基本グラデーション
background-colorで単色、linear-gradientで美しいグラデーションを作れます。
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Preview放射状グラデーションとパターン
radial-gradientは中心から広がるグラデーション、 繰り返しグラデーションでパターンも作れます。
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Preview背景の実用的な使い方
グラデーションとテキストを組み合わせて、実用的なカード・バナーを作ってみましょう。
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Preview自由に試してみよう
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Preview