ログイン
問題3

角を丸くして円形を作ろう

この問題では、要素の角を丸く設定して円形で表示させる方法を学習します。 基礎的なスキルなので何も見ずに作成できるようになっておきましょう。 初級でも登場したプロパティなので思い出しながら問題に取り組もう!

アイコン画像

問題3:角を丸くして円形を作ろう

角を丸くして赤い円形の要素を作成してみましょう。

縦横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!!
LINEの友達追加でお役立ち動画をGET!!

閉じる