ログイン

問題3 丸い要素を作成しよう

HTML_CSSの問題

HTML_CSS

Webデザインでは、要素を円形で表示させることがよくあります。 基礎的なスキルなので何も見ずに作成できるようにしておきましょう。 初級で登場した角を丸くするプロパティをうまく使います。

丸い要素を作成しよう

問題

丸い要素を作成してみましょう。
縦横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: 50%;と指定します。

また、borderはmargin,padding同様で4つのカンマで区切って指定することも可能です。
例)border-radius: 10px 20px 30px 40px;(左上,右上,右下,左下)
ログインして解答を見る
border-radiusについて簡単に解説します。

まずborder-radiusを指定する場合は以下のような構文が使用できます。
border-radius { 数値 ; }
border-radius { 数値/数値 ; }

単位はpx以外に、em、rem、%、vw、vhを使用することもできます。
解説にある通り、左上から時計回りに指定して丸めることができるプロパティです。
頻繁に使用するので必ず覚えましょう。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!