Life is Tech! Lesson
オリジナル制作サンプル集
できあがりイメージ
つくりかた
HTML
<header>
<h1>Mom's Bakery</h1>
</header>
このHTMLのheaderタグで囲まれているところに対し、CSSを反映させていきます。
CSSのセレクタで header を探しましょう。
CSS
header {
background-image: url(img/bg_header.jpg);/* 背景画像 */
height: 450px;/* 高さ */
padding-top: 150px;/* 上がわの余白 */
}
サンプルでは header に反映させます。
効果を分かりやすくするために、h1 の background-color を white に設定し、タイトル文字と枠線の色を変更しています。
background-image を linear-gradient に変更して、背景色を２色指定します。
CSS
header {
background-image: linear-gradient(#FFE4B5 50%, #663300 50%);
height: 450px;/* 高さ */
padding-top: 150px;/* 上がわの余白 */
}
linear-gradient でカッコの中に、２色の色とその色が表示される範囲(-％)を指定するとグラデーションが作成できます。
２色の値と値は , (カンマ) で区切るように注意しましょう。
サンプルでは #FFE4B5(クリーム色) と#663300(茶色) を指定しています。
#FFE4B5 と #663300 に同じ50%の指定をすると、色の境界線がはっきりします。
CSS
background-image: linear-gradient(#FFE4B5 50%, #663300 50%);
コピーしたコードを目的の箇所にペースト（上書き貼り付け）するか、直接書き換えてみましょう。
真ん中で上下に色が分かれていたら、次のステップに進みましょう。
角度をdegで指定します。
CSS
header {
background-image: linear-gradient(90deg, #FFE4B5 50%, #663300 50%);
background-size: 14px;
height: 450px;/* 高さ */
padding-top: 150px;/* 上がわの余白 */
}
カッコの先頭で角度を指定することができます。
サンプルでは 90deg に指定しています。
deg は角度の単位で 90deg は 90度(直角) になり、縦方向に２分することができる指定です。
値と値は , (カンマ) で区切るように注意しましょう。
CSS
background-image: linear-gradient(90deg, #FFE4B5 50%, #663300 50%);
コピーしたコードを目的の箇所にペースト（上書き貼り付け）するか、直接書き換えてみましょう。
background-size を追加して、ストライプの線幅を指定します。
CSS
header {
background-image: linear-gradient(90deg, #FFE4B5 50%, #663300 50%);
background-size: 14px;
height: 450px;/* 高さ */
padding-top: 150px;/* 上がわの余白 */
}
background-size でストライプの線幅を指定できます。
サンプルでは14pxに指定しています。
CSS
background-size: 14px;
コピーしたコードを目的の箇所にペースト（貼り付け）するか、直接書いてみましょう。
ストライプ模様を作るために、header の背景を繰り返す指定にします。もし header に background-repeat: no-repeat; やbackground-size: cover; が指定されている場合は削除してください。
CSS
header {
background-image: linear-gradient(90deg, #FFE4B5 50%, #663300 50%);
background-size: 14px;
height: 450px;/* 高さ */
padding-top: 150px;/* 上がわの余白 */
}
backgroundで指定するCSSの背景は、初めの設定で画像が、左右上下に繰り返される設定になっています。ストライプ模様はこの仕組みを利用して作られています。
ストライプ柄の背景になったら完成です。
