問題

4
HTML_CSS

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

中級参で作成した丸い要素を使って指定された場所に配置します。 正方形の中に丸が収まっていることに注目しましょう。

HTML_CSSの問題に挑戦しよう!

問題

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

中級参で作成した丸い要素を5箇所に設置してみましょう。

HTML/CSSファイルに追記してください。
四角い箱(縦横300px)の中に5つの丸い要素を見本の通りに設置してください。

またそれぞれの丸い要素に色をつけてみましょう。

期待する画面

解答の画像

解答と解説

解説

LINE登録して解答を見る

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

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

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

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

補足

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

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

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

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