ログイン

問題8 4つ葉のクローバーを実装しよう

HTML_CSSの問題

HTML_CSS

CSSを駆使して、見本のような4つ葉のクローバーを作ります。 flexboxをうまく活用して配置を指定しましょう!

4つ葉のクローバーを実装しよう

問題

HTML/CSSを使って四葉のクローバーを実装しよう

見本を画像を参考に作成してください。

期待する画面

コードのアイコン

解答ソースコード

              <div class="clover-cat">
  <span class="clover-cat__part--one"></span>
  <span class="clover-cat__part--two"></span>
  <span class="clover-cat__part--three"></span>
  <span class="clover-cat__part--four"></span>
</div>
¥HTML¥
            
              .clover-cat {
    display: flex;
    flex-wrap: wrap;
    width: 420px;
    margin: 20px auto;
  }
  .clover-cat span {
    display: inline-block;
    background-color: green;
    margin: 5px;
    width: 200px;
    height: 200px;
  }
  .clover-cat__part--one {
    border-radius: 50% 50% 0 50%;
  }
  .clover-cat__part--two {
    border-radius: 50% 50% 50% 0;
  }
  .clover-cat__part--three {
    border-radius: 50% 0 50% 50%;
  }
  .clover-cat__part--four {
    border-radius: 0 50% 50% 50%;
  }
¥CSS¥
            
答えのアイコン

解説

背景緑色の要素を4つ用意します。
それをdisplay:flexとflex-wrap:wrapを付与し上下2つずつに配置します。

そしてクローバーの実装ですが各葉っぱによりborder-radiusを1箇所0pxにして要素を尖らせる形にします。
ログインして解答を見る
今回は親要素にwidth420px、子要素4つにwidth200pxを付与することで、3個目以降の要素がdisplay:flexとflex-wrap:wrapの効果によって下段に落ちて配置されました。

このようにwidthとflex-wrapを指定することによって簡単に2カラムの要素を作ることができます。このテクニックは是非覚えておきましょう。

葉の部分に関しては、border-radiusで左上、右上、右下、左下の順番で角丸を指定できるのでまとめて指定するようにしましょう。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!