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

初心者向け。CSSで画像を丸く切り抜く方法

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

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

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

失敗例

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

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

ファイルCSSプロパティ意味
index.html
style.cssborder-radius: ~~;角丸を設定
cake.png正方形のケーキの画像

作り方

  1. index.htmlに正方形のケーキの画像を用意
  2. 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%丸くして、正方形を正円にしている。*/
    }

\完成/

解説・作り方のコツ

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

まとめ

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

素材データ配布

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

おそまつ!