どうも、7noteです。今回はborder-radiusでホールケーキを作るお話。(近々エクレアも作る予定。)
「もう3時か、おやつにしよう。」
「(バタバタ)・・・よし、イチゴのショートケーキができたぞ!」
「・・・しまった、ホールケーキにしたかったのに、丸い型がなくて四角いケーキになっちゃった!」
失敗例
![](https://naruweb.com/wp-content/uploads/2023/09/cake.png)
「あーーー・・・」
「でも大丈夫! 何たってフロントエンジニアは[border-radius]で丸くさせることができるからね!!」
みんなも[border-radius]で円を作る方法をマスターして、キレイなホールケーキを作ろう!
ショートケーキの材料はこちら(1人前)
ファイル | CSSプロパティ | 意味 |
---|---|---|
index.html | ||
style.css | border-radius: ~~; | 角丸を設定 |
cake.png | 正方形のケーキの画像 |
作り方
- index.htmlに正方形のケーキの画像を用意
- style.cssで、ケーキを四角から正円にして出来上がり
1.index.htmlに正方形のケーキの画像を用意
index.html
<div class="dish">
<img src="cake.png" alt="ショートケーキ">
</div>
2.style.cssで、ケーキを四角から正円にして出来上がり
style.css
.dish img {
border-radius: 50%; /* 角を50%丸くして、正方形を正円にしている。*/
}
\完成/
![](https://naruweb.com/wp-content/uploads/2023/09/cake_ok.png)
解説・作り方のコツ
- [border-radius]にはpxやem、%などの単位が使えます!今回は円にするために、[border-radius: 50%;]と書くことで4つの角をそれぞれ幅や高さの半分まで丸くしたので、丸くなった端同志が繋がって円のように見えています!
- お皿(dish)じゃなくて、ケーキ自身(img)に[border-radius]を適応させないとうまく丸くならないから気をつけて!
- このあとエクレアも作るので、もっと[border-radius]について知りたい人はエクレアの作り方も見ていってね!
まとめ
やっぱりホールケーキといったらイチゴのショートケーキでしょ。
素材データ配布
![](https://naruweb.com/wp-content/uploads/2023/09/cake-1.png)