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で美しいグラデーションを作れます。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
4 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
放射状グラデーションとパターン
radial-gradientは中心から広がるグラデーション、 繰り返しグラデーションでパターンも作れます。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
4 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
背景の実用的な使い方
グラデーションとテキストを組み合わせて、実用的なカード・バナーを作ってみましょう。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
19 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
自由に試してみよう
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
5 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。