問題
9backgroundで縞模様を作ってみよう
CSSアニメーションの問題に挑戦しよう！
問題
「backgroundで縞模様を作ってみよう」
空白の中に何色でもいいのですが、デモのように5本ずつ二色の線を引いてください。
あらかじめエディタに書くコード
<div class="stripe"></div>
¥HTML¥
.stripe{
width: 200px;
height: 50px;
border: 2px solid black;
}
¥CSS¥
期待する画面
解答と解説（backgroundで縞模様を作ってみよう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
まず、backgroundにlinear-gradientはグラデーションをつけるものじゃないの？という疑問が出てくると思いますが、解答の通りパーセンテージをつけることでここまで！と決めることができるんです。
ちょっと何言ってるかわからない人に向けて詳しく言うと、初期値ではlinear-gradientのグラデーションは上から下に向かって前から順に指定した色に変わっていくようになっています。そこに数値をつけることでここできっぱり切れてねという指示になります。そして省略されているのですが、実は始めに指定した色は0%から、最後の色は100%までと初期値でなっているので解答のようにそれぞれ、５０％を与えると半分ずつの色になります。
最後にbackground-sizeを指定します。一つ目の数字はx軸方向の大きさなのですが、これは今回の場合は0以外であれば大丈夫です。なぜかというとbackgroundはその要素全体を覆うまでrepeatによって同じものが描画されるようになっているので同じものがぎっしり横に並んでいます。なので普通の線に見えるんです。今回は5本ずつの線なので50px/5=10pxよりbackground-sizeの二つ目の数字には10pxを入れます。
