問題

8
HTML_CSS

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

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

HTML_CSSの問題に挑戦しよう!

問題

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

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

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

期待する画面

解答の画像

解答と解説

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

背景緑色の要素を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で左上、右上、右下、左下の順番で角丸を指定できるのでまとめて指定するようにしましょう。

さらにスキルアップしたい方は公式LINEから「HTML_CSS」と送信すると動画が見れます。

LINE登録して動画を視聴する
今なら豪華5大特典もらえる! LINE登録でGET