【初心者でもわかる】border-radiusで円を作る方法。一緒にホールケーキを作ろう!

どうも、7noteです。今回はborder-radiusでホールケーキを作るお話。（近々エクレアも作る予定。）

「もう3時か、おやつにしよう。」
「（バタバタ）・・・よし、イチゴのショートケーキができたぞ！」

「・・・しまった、ホールケーキにしたかったのに、丸い型がなくて四角いケーキになっちゃった！」

失敗例

「あーーー・・・」
「でも大丈夫！ 何たってフロントエンジニアは[border-radius]で丸くさせることができるからね！！」
みんなも[border-radius]で円を作る方法をマスターして、キレイなホールケーキを作ろう!

ショートケーキの材料はこちら(1人前)

作り方

1. index.htmlに正方形のケーキの画像を用意
2. style.cssで、ケーキを四角から正円にして出来上がり

1.index.htmlに正方形のケーキの画像を用意

<div class="dish">
    <img src="cake.png" alt="ショートケーキ">
</div>

2.style.cssで、ケーキを四角から正円にして出来上がり

    .dish img {
        border-radius: 50%; /* 角を50%丸くして、正方形を正円にしている。*/
    }

＼完成／

解説・作り方のコツ

• [border-radius]にはpxやem、%などの単位が使えます！今回は円にするために、[border-radius: 50%;]と書くことで4つの角をそれぞれ幅や高さの半分まで丸くしたので、丸くなった端同志が繋がって円のように見えています！
• お皿（dish）じゃなくて、ケーキ自身（img）に[border-radius]を適応させないとうまく丸くならないから気をつけて！
• このあとエクレアも作るので、もっと[border-radius]について知りたい人はエクレアの作り方も見ていってね！

まとめ

やっぱりホールケーキといったらイチゴのショートケーキでしょ。

素材データ配布

真似して作りたい人はこの画像をダウンロードして使ってね！

おそまつ！