非IT業界のweb担当者一年生ブログ

出版社でweb担当となったITの素人達が、web、ITのあれこれを備忘録的にまとめるブログ。

Photoshop不要!四角い画像を丸く表示する方法

みなさんこんにちは!

俺たち非IT系web担一年生プロジェクトの瀬戸です。

 

今日は、ちまたで見かける、人物とかによく使われる丸く表示される画像の作り方を紹介します。

 

↓こんなやつ

f:id:it-support:20180830134536j:plain

 

これだけで、なんだかそれっぽいですよね!?
プロが作ってる感が一気に出ます。

 

これ実は、Photoshopなどは一切不要。cssだけで作れるのです。

 

作り方はすごく簡単。

まずは、四角い画像を貼ります。

f:id:it-support:20180830134536j:plain

 

次に、適当なクラスを指定し、そこに下記のcssを記述します。

ここでは仮に、「face」というクラスを作成しました。

 

 

すると、このような画像になります。

 

f:id:it-support:20180830134536j:plain

 

はい、簡単ですね!

このcssのポイントは、数値を%で表記したことです。

これであれば、どんなサイズの画像でも丸くなりますので、おすすめです!

 

それでは、引き続き楽しいcssライフをお過ごしください!

 

f:id:it-support:20180830095454j:plain