ドットインストールでCSS3を学ぼう#10〜#12
CSS3の学習を、今日も
ドットインストールさんで進めていきたいと思います。
#10 background-size を使ってみよう
今回は、ヘッダーに画像を載せて、
その大きさを調整してみたいと思います。
htmlのbodyの中には、headerのみが用意されています。
<body>
<header>
</header>
</body>
cssではこのように指定されています。
body{ margin: 0; }
header{
width: 100%;
heigth: 130px;
background: url('cafe.jpg') ;
}
ブラウザで見ると、ヘッダー部分にカフェの写真が用意されています。
うん、すてきなカフェですね。
この画像を繰り返さないようにするのには
no-repeatにします。
no-repeatについては、css入門編の#17で学びました。
あと、理解しやすいように写真の後ろ側の背景色はスカイブルーにします。
cssにこのように追加します。
header{
width: 100%;
heigth: 130px;
background: url('cafe.jpg')
no-repeat skyblue;
}
すると、このようになります。
おお！写真が一つになって、見やすくなりました♪
ヘッダーの画像以外の部分はスカイブルーになっていてわかりやすいですね。
さて、この背景の画像のサイズを調整してみましょう。
background-size
背景画像の幅を、ブラウザの幅の50%にしてみましょう。
header{
width: 100%;
heigth: 130px;
background: url('cafe.jpg')
no-repeat skyblue;
background-size: 50%;
}
すると、このようになります。
ブラウザの幅の50%になりました。
高さは、縦横比が常に一定になるように自動で調整してくれます。
ブラウザの大きさを変えても、50%になるようにしてくれます。
ちなみに、縦の長さを指定することもできます。
header{
width: 100%;
heigth: 130px;
background: url('cafe.jpg')
no-repeat skyblue;
background-size: 50% 100%;
}
幅、縦の順に指定します。
縦の長さが100%になりました。
cover, contain
background-sizeにcoverと指定すると、
画像の縦横比を変えずに、背景領域を常にカバーするようにしてくれます。
header{
width: 100%;
heigth: 130px;
background: url('cafe.jpg')
no-repeat skyblue;
background-size: cover;
}
ヘッダー部分のすべてに画像が配置されました。
ブラウザを縮めても、このとおり。
縦横比は保持するので、
画像に入りきらない部分はカットされるという特性もあります。
containは、
画像の縦横比を保持しつつ、必ず画像全体が表示されるようにしてくれます。
header{
width: 100%;
heigth: 130px;
background: url('cafe.jpg')
no-repeat skyblue;
background-size: contain;
}
このようにすると、
こんな感じ。
ちなみにブラウザの幅を広げても、
背景のスカイブルーの部分が広がるだけです。
縦横比は保持するので、ブラウザの幅をうんと縮めると
こんな風に見えます。
ちなみに、背景のスカイブルー（余った領域）を、どこにおくかは
background-potition で指定することができます。
background-potitonに関しても、css入門編の#17で学びました。
header{
width: 100%;
heigth: 130px;
background: url('cafe.jpg')
no-repeat skyblue;
background-size: contain;
background-potition 50% 50%;
}
このように指定すると、
真ん中に表示されます。
すっきり！気持ちいい！
よく見るヘッダー画像しくみがわかって、とても楽しかったです✨
#11 複数の背景画像を使ってみよう
#10の続きです。
同じように、ヘッダーに画像を載せてみましょう。
今回は、複数の画像を載せます。
htmlは、#10の時と同じく
<body>
<header>
</header>
</body
bodyにはヘッダーだけが指定されています。
さて、まずcssのほうに、１枚目の画像を指定してみましょう。
ヘッダーの幅と高さはこのように指定されています。
header{
width: 100%;
height: 200px;
background: url('0001.gif') no-repeat 0 0;
}
0001.gifという画像が用意されています。
no-repeatはcss入門編の#17でも学習しました。
画像の繰り返しなし、左上に寄せられています。
css3では、複数の画像を並べて表示することができます。
方法も簡単で、cssのところにどんどん書き足していきます。
header{
width: 100%;
height: 200px;
background: url('0001.gif') no-repeat 0 0;
background: url('0002.gif') no-repeat 30px 30px;
}
２枚目も同じように書き足します。
今回は、左と上に30pxの余白をあけました。
すると、このように表示されます。
このように重なって表示されます。
下の方に書かれている画像は、下に表示されていくそうです。
わかりやすくていいですね。
3枚目の画像も同じように足していきます。
header{
width: 100%;
height: 200px;
background: url('0001.gif') no-repeat 0 0;
background: url('0002.gif') no-repeat 30px 30px;
background: url('0003.gif') no-repeat bottom right;
}
「0003」の画像は、右下に表示されます。
画像を並べやすいのは楽しいですね。
かっこいいヘッダー画像を作ることができそうです。
#12 linear-gradient()を使ってみよう
今回は、背景の色をグラデーションにする方法を学習します。
用意されているhtmlはこんな感じ。
<body>
<div></div>
<body>
背景画像の大きさは縦横200pxになっています。
div{
width: 200px;
height: 200px;
}
これに、グラデーションをつけていきます。
div{
width: 200px;
height: 200px;
background-image : linear-gradient(skyblue,blue) ;
}
すると、ブラウザで確認すると次のようになっています。
スカイブルーからブルーへのグラデーションができていますね。
background-color ではなく、background-imageになるのでご注意くださいね。
linear-gradientのあとのカッコに、
「この色→この色」への指定を書くことでその色のグラデーションができます。
ちなみに、デフォルトだとこのように上から下へのグラデーションになっていますが、
向きを変えることもできます。
div{
width: 200px;
height: 200px;
background-image : linear-gradient( to top left,skyblue,blue) ;
}
このように書くと、左上に向かってグラデーションができます。
なるほど！
グラデーションの向きには注意しないといけないですね。
また、グラデーションの向きは角度で指定することもできます。
div{
width: 200px;
height: 200px;
background-image : linear-gradient( 45deg,skyblue,blue) ;
}
degは、上の中心から時計回りの角度なので、
右上45度にむかって、グラデーションが進んでいきます。
なるほどおもしろい！
そして、なんと三色にすることもできます。
div{
width: 200px;
height: 200px;
background-image : linear-gradient( lightgreen,skyblue,blue) ;
}
このように3つ並べると、ライトグリーン、スカイブルー、ブルーの順に並びます。
おおー！グラデーション、きれいで楽しいですね。
このグラデーションの割合を配分することもできます。
div{
width: 200px;
height: 200px;
background-image : linear-gradient( lightgreen 10%,skyblue 70%,blue) ;
}
このようにすると、ライトグリーンが10%、スカイブルーは70%、残りはブルーとなります。
本当だ！スカイブルーの割合が増えましたね。
また、グラデーションを繰り返すこともできます。
div{
width: 200px;
height: 200px;
background-image : repeating-linear-gradient( lightgreen ,skyblue 20px) ;
}
このようにすると、ライトグリーンからスカイブルーへのグラデーションを
20pxごとに繰り返すようになります。
グラデーションのボーダーみたいになりました！
CSS３のグラデーション、使いこなすととっても楽しそうですね（＊＾＾＊）
今回は目で見てわかりやすい内容で楽しかったです。またがんばろう♪
