【初心者向け】サイトの画像の端を手書き風にする【CSS】

こんにちは、新人の奥田です！

うだるような暑さが続いていますが、みなさん元気にお過ごしでしょうか？
私は、出勤時少し歩いただけで汗びっしょりです……。

さて今回は、
サイト上の画像の四隅をちょっと“ふにょん”とゆがませて、やさしい雰囲気を出す方法をご紹介します！
いわゆる正方形や長方形のカクカクした見た目ではなく、
手作り感あるやわらかいデザインにしたいときにぴったりですよ。

やり方は超シンプル！

色々な方法がありますが、私のような初心者でも「これ簡単！」と思ったのが、
CSSの`border-radius` プロパティを使って、角を個別に変形させる方法です。

今回は、ドーナツの画像を例に使ってみますね。

これだけで角がふにょっとゆがんで、
やさしくてかわいらしい雰囲気が簡単に出せます。

`border-radius`ってなに？

`border-radius` は要素の角に「丸み」をつけるCSSのプロパティで、
それぞれの数値は、左上・右上・右下・左下の順で設定しています。

今回のように 「/」 を使って上下方向の丸みも指定することで、
より複雑な（＝自然な）形にすることができます。

画像そのものを加工しなくていいので、差し替えもラクです！

画像を複数並べる場合

せっかくなので、ケーキ屋さんの商品一覧のように複数枚並べてみましょう。

(かわいいですね～)

しかし、
これだけでもいいのですが、９枚の形が全て同じになっています。
同じ`border-radius`の数値を効かせているからですね。

せっかくなのでもう少しいじってみましょう！

微妙～な違いですが、お気付きでしょうか。
何を変えたかと言いますと…

右の画像９枚は数値をわずかにずらしているだけですが、
全て同じ形より自然で、ラフな雰囲気が出せます。

応用もできる！

このやり方は画像だけでなく、
例えばフォーム画面の入力欄などにも応用できます。

他にも
テキストボックス
ボタン
カード風のUI　などなど…

画面がグッと親しみやすくなりますよ。

CSSは、ちょっとしたことで雰囲気がグッと変わって面白いですね。
今回の内容が、少しでも参考になればうれしいです！