CSSで角丸にチャレンジしよう!

画像を角丸にしてみよう!

画像の挿入はできているみたいだから、その加工をしてみよう!

なにをするんですか?

「角丸(かどまる)」といって、文字通り画像の角を丸くするんだ

ワードでも似たようなことをしたことがあります!

そうだね、でも、今回はCSSを使うから、背景色の白色は反映されないんだよ

切り抜いた背景は、透明になるってことですか?

その通り、それでは、まずは画像のサンプルを見てみようか

そして、これが今日のコードだよ

<div><img style="border-radius:20px;" src="画像のファイル名.jpg" width="200px" height="200px"></div>

できました!

いい感じだね、なにか質問はあるかな?

丸さの調整はどうすればいいですか?

いい質問だね、「border-radius:px;」を変更すればいいよ

なるほど、ありがとうございます!