こんにちは、新人の奥田です！
うだるような暑さが続いていますが、みなさん元気にお過ごしでしょうか？
私は、出勤時少し歩いただけで汗びっしょりです……。
さて今回は、
サイト上の画像の四隅をちょっと“ふにょん”とゆがませて、やさしい雰囲気を出す方法をご紹介します！
いわゆる正方形や長方形のカクカクした見た目ではなく、
手作り感あるやわらかいデザインにしたいときにぴったりですよ。
やり方は超シンプル！
色々な方法がありますが、私のような初心者でも「これ簡単！」と思ったのが、
CSSの`border-radius` プロパティを使って、角を個別に変形させる方法です。
今回は、ドーナツの画像を例に使ってみますね。
html
<div class=”image-container”>
<img src=”image/donut.jpg” alt=”ドーナツの画像”>
</div>
CSS
.image-container {
border-radius: 256px 15px 225px 16px / 14px 224px 13px 253px;
}
これだけで角がふにょっとゆがんで、
やさしくてかわいらしい雰囲気が簡単に出せます。
`border-radius`ってなに？
`border-radius` は要素の角に「丸み」をつけるCSSのプロパティで、
それぞれの数値は、左上・右上・右下・左下の順で設定しています。
今回のように 「/」 を使って上下方向の丸みも指定することで、
より複雑な（＝自然な）形にすることができます。
画像そのものを加工しなくていいので、差し替えもラクです！
画像を複数並べる場合
せっかくなので、ケーキ屋さんの商品一覧のように複数枚並べてみましょう。
(かわいいですね～)
しかし、
これだけでもいいのですが、９枚の形が全て同じになっています。
同じ`border-radius`の数値を効かせているからですね。
せっかくなのでもう少しいじってみましょう！
微妙～な違いですが、お気付きでしょうか。
何を変えたかと言いますと…
▼左の画像９枚…全て同じ角度に変形
①border-radius: 256px 15px 225px 16px / 14px 224px 13px 253px;
▼右の画像９枚…4パターンの角度に変形
① border-radius: 256px 15px 225px 16px / 14px 224px 13px 253px;
② border-radius: 280px 10px 200px 20px / 20px 210px 15px 240px;
③ border-radius: 300px 5px 210px 25px / 10px 220px 18px 250px;
④ border-radius: 240px 25px 230px 12px / 15px 230px 20px 245px;
右の画像９枚は数値をわずかにずらしているだけですが、
全て同じ形より自然で、ラフな雰囲気が出せます。
応用もできる！
このやり方は画像だけでなく、
例えばフォーム画面の入力欄などにも応用できます。
他にも
テキストボックス
ボタン
カード風のUI などなど…
画面がグッと親しみやすくなりますよ。
CSSは、ちょっとしたことで雰囲気がグッと変わって面白いですね。
今回の内容が、少しでも参考になればうれしいです！
PREV