【CSS】
四角い画像を丸く切り抜いてトリミングする方法
コピペOK！簡単に画像を丸く加工する
投稿日 2021/05/30 更新日 2021/05/30
こんにちは。当サイトの管理者「元木皇天」です。
ウェブサイトを構築しているときに、四角い画像を丸く切り抜いてトリミングした状態で表示させたい時ってあると思います。
今回は、CSSのコピペで簡単に画像を丸く切り抜いてトリミングする方法について解説いたします。
環境
OS：MacOS Big Sur
GoogleChrom：バージョン90.0.4430.212
やりたいこと
画像を丸く切り抜いてトリミング
画像を丸く切り抜いてトリミングする方法はとてもシンプルで簡単です！たったの１行追加するだけなので！
では実際のコードを見てみましょう。（コピペして使用OKです。）
border-radius: 50%;
一応コードの解説をしますと、今回使用した"border-radius"は、適用した要素の角を丸くすることができるCSSです。
以下に公式リファレンスのリンクを貼っておきますので参考にしていただければと思います。
いろいろなトリミング
今回紹介した"border-radius"を使用して、他のトリミングについても少しですがご紹介させていただきます。
上半分だけ丸くトリミングする
border-top-left-radius: 50%; border-top-right-radius: 50%;
下半分だけ丸くトリミングする
border-bottom-left-radius: 50%; border-bottom-right-radius: 50%;
少しだけ丸くトリミングする
border-radius: 30%;
微妙に角を丸くトリミングする
border-radius: 10%;
参考にしていただけたら幸いです。
まとめ
画像を丸く切り抜いてトリミングをしたいときはborder-radiusを使用しましょう。
参考文献・おすすめ文献
リンク
リンク
