ログイン

問題9 縞模様の作り方1

CSSAnimationの問題

CSSAnimation

縞模様の作り方1

問題

空白の中に何色でもいいのですが、デモのように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¥
            
答えのアイコン

解説

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