丸い要素を色んな場所に配置してみよう

問題4：丸い要素を色んな場所に配置してみよう

中級参で作成した丸い要素を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¥

解説

中級参と初級六の複合技です。

absoluteで浮かせている要素は
topとbottom、leftとrightで場所を指定できます。

また、最適なhtml構造の書き方は解答ソースコードを参考にしてください。
共通のスタイルを当てるときは、共通のクラスをつけてあげるようにしましょう。(今回の場合は、.ball)

ログインして解答を見る

補足

今回は初級六で登場したpositionプロパティを使って要素の配置を指定しました。
期待する画面の画像を見ると分かる通り、丸が重なっている部分があります。
この場合、基本的にはrelativeとabsoluteが使われていると考えましょう。
そしてrelativeとabsoluteが指定されると要素が浮きます。
要素が浮いた状態で位置を指定する場合はtop,right,bottom,leftを使用しますのでまとめて覚えておきましょう。

また解説にもある通り、CSSでは基本的に重複するものはひとつのクラスにまとめます。
後に修正が必要になった際に、工数少なく修正できます。これはチームで開発する際には絶対に必要な考え方なので、早いうちから意識しておきましょう。

完了にする！

1.HTMLの宣言をしてみよう

続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。