Googleでログイン
Twitterでログイン
問題
中級3で作成した丸い要素を5箇所に設置してみましょう。
HTML/CSSファイルに追記してください
四角い箱(縦横300px)の中に5つの丸い要素を見本の通りに設置してください。
またそれぞれの丸い要素に色をつけてみましょう。
HTML/CSSファイルに追記してください
四角い箱(縦横300px)の中に5つの丸い要素を見本の通りに設置してください。
またそれぞれの丸い要素に色をつけてみましょう。
期待する画面
解答ソースコード
<div class="ball__wrap">
<div class="ball ball--one"></div>
<div class="ball ball--two"></div>
<div class="ball ball--three"></div>
<div class="ball ball--four"></div>
<div class="ball ball--five"></div>
</div>
¥HTML¥
.ball__wrap {
position: relative;
width: 300px;
height: 300px;
border: 1px solid;
}
.ball {
position: absolute;
width: 150px;
height: 150px;
border: 1px solid;
border-radius: 50%;
}
.ball--one {
top: 0;
left: 0;
background-color: red;
}
.ball--two {
top: 0;
right: 0;
background-color: blue;
}
.ball--three {
bottom: 0;
left: 0;
background-color: yellow;
}
.ball--four {
bottom: 0;
right: 0;
background-color: green;
}
.ball--five {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: purple;
}
¥CSS¥
1.HTMLの宣言をしてみよう
解説
absoluteで浮かせている要素は
topとbottom
leftとrightで場所を指定できます。
また、最適なhtml構造の書き方は解答ソースコードを参考にしてください。
共通のスタイルを当てるときは、共通のクラスをつけてあげるようにしましょう。(今回の場合は、.ball)