CSSAnimation
Googleでログイン問題9：backgroundで縞模様を作ってみよう
空白の中に何色でもいいのですが、デモのように5本ずつ二色の線を引いてください。
あらかじめエディタに書くコード
<div class="stripe"></div>
¥HTML¥
.stripe{
width: 200px;
height: 50px;
border: 2px solid black;
}
¥CSS¥
期待する画面
解答ソースコード
.stripe{
background: linear-gradient(#dddddd 50%,#aaaaaa 50%);
background-size:1px 10px;
}
¥CSS¥
完了にする！
活動記録をTweetする
ちょっと何言ってるかわからない人に向けて詳しく言うと、初期値ではlinear-gradientのグラデーションは上から下に向かって前から順に指定した色に変わっていくようになっています。そこに数値をつけることでここできっぱり切れてねという指示になります。そして省略されているのですが、実は始めに指定した色は0%から、最後の色は100%までと初期値でなっているので解答のようにそれぞれ、５０％を与えると半分ずつの色になります。
最後にbackground-sizeを指定します。一つ目の数字はx軸方向の大きさなのですが、これは今回の場合は0以外であれば大丈夫です。なぜかというとbackgroundはその要素全体を覆うまでrepeatによって同じものが描画されるようになっているので同じものがぎっしり横に並んでいます。なので普通の線に見えるんです。今回は5本ずつの線なので50px/5=10pxよりbackground-sizeの二つ目の数字には10pxを入れます。