人生初ポートフォリオサイト

https://portfolio.ppmp556.com/

100日チャレンジの355日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
355日目は、

今日の作業・やったこと⇩

●読書　kindle 20分
●ブログ記事1記事作成
●プログラミング学習355日目 2h
・ポートフォリオのアイコンに3Dアニメーション追加#駆け出しエンジニアとつながりたい#100DaysOfCode

— ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) June 26, 2020

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

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

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

失敗例

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

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

ファイル	CSSプロパティ	意味
index.html
style.css	border-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]について知りたい人はエクレアの作り方も見ていってね！

→→【初心者でもわかる】border-radiusで長方形の左右を丸くして、エクレアを作る

まとめ

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

素材データ配布

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

おそまつ！

（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）