問題9 縞模様の作り方1

まず、backgroundにlinear-gradientはグラデーションをつけるものじゃないの？という疑問が出てくると思いますが、解答の通りパーセンテージをつけることでここまで！と決めることができるんです。ちょっと何言ってるかわからない人に向けて詳しく言うと、初期値ではlinear-gradientのグラデーションは上から下に向かって前から順に指定した色に変わっていくようになっています。そこに数値をつけることでここできっぱり切れてねという指示になります。そして省略されているのですが、実は始めに指定した色は0%から、最後の色は100%までと初期値でなっているので解答のようにそれぞれ　５０％を与えると半分ずつの色になります。最後にbackground-sizeを指定します。一つ目の数字はx軸方向の大きさなのですが、これは今回の場合は０以外であれば大丈夫です。なぜかというとbackgroundはその要素全体を覆うまでrepeatによって同じものが描画されるようになっているので同じものがぎっしり横に並んでいます。なので普通の線に見えるんです。今回は5本ずつの線なので50px/5=10pxよりbackground-sizeの二つ目の数字には10pxを入れます。