CSS アイコン画像を丸くする方法

YoutubeなどのWEBサービスでアイコンを丸く切り抜いたような画像をCSSで実装します。

特徴

• CSSだけで実装
• 画像は正方形でなくてもOK（中央寄せ）

デモ

See the Pen
circle icon by Aquarium (@aquarium)
on CodePen.

HTML

<figure class="icon-circle"><img src="https://picsum.photos/id/237/540/540" alt=""></figure>

<figure class="icon-circle"><img src="https://picsum.photos/id/238/540/540" alt=""></figure>

<figure class="icon-circle"><img src="https://picsum.photos/id/239/540/540" alt=""></figure>

<figure class="icon-circle"><img src="https://picsum.photos/id/240/540/540" alt=""></figure>

• .icon-circle内の画像に適用するように作っています。

CSS

.icon-circle{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

.icon-circle img{
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

• border-radiusで要素を丸くします。
• imgにpositionとtop, left, right, bottom、margin: auto;を指定し、要素内で天地中央に移動するようにします。
• icon-circleのwidth heightは変更可能です。

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選