Life is Tech! Lesson
オリジナル制作サンプル集
背景をグラデーションにする
難易度：
プロパティ：background: linear-gradient
関連レッスン：Chapter 1 レッスン 1
できあがりイメージ
つくりかた
Step1
グラデーションにする要素をHTMLから探す
HTML
<header>
<h1>Mom's Bakery</h1>
</header>
このHTMLのheaderタグで囲まれているところに対し、CSSを反映させていきます。
Step2
グラデーションにする要素のCSSセレクタを探す
CSSのセレクタで header を探しましょう。
CSS
header {
background-image: url(img/bg_header.jpg);/* 背景画像 */
height: 450px;/* 高さ */
padding-top: 150px;/* 上がわの余白 */
}
サンプルでは header に反映させます。
効果を分かりやすくするために、h1 の border を削除しています。
Step3
要素の背景をグラデーションにする
background: linear-gradient を追加して、グラデーションの指定をします。
CSS
header {
background-image: url(img/bg_header.jpg);/* 背景画像 */
height: 450px;/* 高さ */
padding-top: 150px;/* 上がわの余白 */
background: linear-gradient(#FA8BFF 0%,#2BD2FF 50%,#2BFF88 100%);
}
カッコの中に色を２つ以上指定するとグラデーションが作成できます。
サンプルでは#FA8BFF(紫色)→#2BD2FF(ブルー)→#2BFF88(黄緑) の３色を指定しています。
カラーコードの後ろの % はその色の位置を指定しています。0%は一番上、50%は真ん中、100%は一番下になります。
※background-imageは反映されなくなります。
Step4
グラデーションの方向を指定する
to 〜 の後に値を指定するとグラデーションに方向をつけることができます。
CSS
header {
background-image: url(img/bg_header.jpg);/* 背景画像 */
height: 450px;/* 高さ */
padding-top: 150px;/* 上がわの余白 */
background: linear-gradient( to bottom right,#FA8BFF 0%,#2BD2FF 50%,#2BFF88 100%);
}
サンプルでは、to bottom right を追加して、右下方向のグラデーションをつけています。
値と値は , (カンマ) で区切るように注意しましょう。
Step5
コードを書くかコピー＆ペーストする
CSS
background: linear-gradient(to bottom right,#FA8BFF 0%,#2BD2FF 50%,#2BFF88 100%);
コピーしたコードを目的の箇所にペースト（貼り付け）するか、直接書いてみましょう。
Step6
実際の見え方を確認する
背景がグラデーションになっていたら完成です。
