CSSで画像を丸く切り取る方法

　今回から自分が知っているWeb制作で使うであろう知識を紹介していこう！ということで今回はタイトルにもあるように“CSSで画像を丸く切り取る方法”を紹介したいと思います！

　このサイトではトップページだったり、このブログの記事一覧のアイキャッチ画像なども画像を丸く表示させています。なんで丸なの？といわれると、最近はよく画像を丸く切り抜いて表示しているサイトが多いような印象があったためなのですが、最初はCSSで画像を丸く切り取れることを知らず、PhotoShopで丸く切り取った画像を表示させていたのですが、のちにググってみるとCSSでも画像が切り取れることを知り、なおかつこれならわざわざ画像を丸く切り取ったものを作る必要がない、ということでさっそく採用しました！ｗ

　早速CSSでの書き方ですが、画像をサイトに表示させるには
<img src=”画像ファイル名”>
と入力しますが、そこに以下のようなCSSを指定してあげます。

img {
   border-radius: 50%;
}

このように指定してあげると画像を丸く切り取ってくれます！

　結構近年では丸く画像を切り取って表示させるサイトも多いので、この書き方は覚えておくと便利だと思いますので是非活用してみてください！