HTML_CSS
Googleでログイン
問題3：角を丸くして円形を作ろう
角を丸くして赤い円形の要素を作成してみましょう。
縦横300pxの四角い要素を見本のように丸くしてみてください。
縦横300pxの四角い要素を見本のように丸くしてみてください。
あらかじめエディタに書くコード
<div class="column__cat"></div>
¥HTML¥
.column__cat {
width: 300px;
height: 300px;
border: 1px solid;
}
¥CSS¥
期待する画面
解答ソースコード
<div class="column__cat"></div>
¥HTML¥
.column__cat {
width: 300px;
height: 300px;
border: 1px solid;
border-radius: 50%;
background-color: red;
}
¥HTML¥
補足
border-radiusについて簡単に解説します。
まずborder-radiusを指定する場合は以下のような構文が使用できます。
border-radius { 数値 ; }
border-radius { 数値/数値 ; }
単位はpx以外に、em、rem、%、vw、vhを使用することもできます。
解説にある通り、左上から時計回りに指定して丸めることができるプロパティです。
頻繁に使用するので必ず覚えましょう。
まずborder-radiusを指定する場合は以下のような構文が使用できます。
border-radius { 数値 ; }
border-radius { 数値/数値 ; }
単位はpx以外に、em、rem、%、vw、vhを使用することもできます。
解説にある通り、左上から時計回りに指定して丸めることができるプロパティです。
頻繁に使用するので必ず覚えましょう。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
また、borderはmargin,padding同様で4つのカンマで区切って指定することも可能です。
例)border-radius: 10px 20px 30px 40px;(左上,右上,右下,左下)