問題
3
HTML_CSS
角を丸くして円形を作ろう
この問題では、要素の角を丸く設定して円形で表示させる方法を学習します。 基礎的なスキルなので何も見ずに作成できるようになっておきましょう。 初級でも登場したプロパティなので思い出しながら問題に取り組もう！
HTML_CSSの問題に挑戦しよう！
問題
「角を丸くして円形を作ろう」
角を丸くして赤い円形の要素を作成してみましょう。
縦横300pxの四角い要素を見本のように丸くしてみてください。
あらかじめエディタに書くコード
<div class="column__cat"></div>
¥HTML¥
.column__cat {
width: 300px;
height: 300px;
border: 1px solid;
}
¥CSS¥
期待する画面
解答と解説
解説
LINE登録して解答を見る
※ご登録後すぐに解答閲覧用URLが
LINEで届きます
角を丸くする為には、border-radius: 50%;と指定します。
また、borderはmargin,padding同様で4つのカンマで区切って指定することも可能です。
例)border-radius: 10px 20px 30px 40px;(左上,右上,右下,左下)
補足
border-radiusについて簡単に解説します。
まずborder-radiusを指定する場合は以下のような構文が使用できます。
border-radius { 数値 ; }
border-radius { 数値/数値 ; }
単位はpx以外に、em、rem、%、vw、vhを使用することもできます。
解説にある通り、左上から時計回りに指定して丸めることができるプロパティです。
頻繁に使用するので必ず覚えましょう。
