クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

CSS

CSS 未加工の画像から丸いアイコンを作る(普通の画像だけでOK)

投稿日:

アイコンのような画像を表示させたいときがあります。
きれいな正円の中に画像が配置されているやつですね。

 

いちいち元画像から上記のような画像に加工するのは面倒ですよね。
画像データが増えるのも良くないかもしれません。
そんな時は下のような普通の画像を元にCSSを使ってアイコン画像を作ってみましょう。

 

1. 未加工の画像から丸いアイコンを作る(HTML)

まずはHTMLです。

画像をdivで囲みます。
divには「trim」というクラスを設定しておきましょう。

2. 未加工の画像から丸いアイコンを作る(CSS)

CSSは少し多めですね。

「trim」クラスで正円を作り、その中に画像を配置するようなイメージです。
「trim」クラスのポイントは「3行目、6行目」でしょうか。

「border-radius:50%」でdivは正円になりますが、このまま上に画像を配置すると、せっかくの正円が潰れてしまいます。
それを回避するために「overflow:hidden」を設定しています。
こうすることで、正円からはみ出した部分を非表示にしてくれます。

「img」では画像が正円の中心に画像の中心が来るようにしています。
これさえ設定しておけば、divの大きさが変えても大丈夫ですね。
CSSハックも念のために書いています。

See the Pen CSS 未加工の画像から丸いアイコンを作るCSS(普通の画像だけでOK) by clue-design (@clue-design) on CodePen.0

大きな画面でみたい場合はこちらから。

-CSS

執筆者:

関連記事

CSS 画像の上に文字を重ねて表示させる(サンプル付き)

今回は画像の上に文字やタイトルを重ねて表示してみましょう! 少しオシャレで良い感じですよね。   こんな仕組みのものを作ります 画像をきっちりと囲む領域を作り「position:relati …

CSS liタグ の不要な行頭マークを削除する(サンプル付き)

liタグはよく利用しますがデザインによっては行頭のマーク「・」が邪魔になることがあります。 このマークはCSSで簡単に削除することができます。

CSS Animate.css の基本サンプル(通常・クリックされた・マウスオーバー)

テキストだけのサイトだと「さびしい」「少しだけ動きが欲しい」という場合には「Animate.css」が便利です。 Animate.cssは、あらかじめ定義されているクラスを追加するだけで要素にアニメー …

CSS テキストボックスのフォーカス時の青枠を無効にする

もしかするとChromeだけかもしれませんが、テキストボックスや画像にフォーカスされた時に青い枠が出てしまいます。 ↓こんなのです。 違和感がありますので、解除する方法を調べました。 CSSの設定のみ …

CSS ブロック要素(div)の内側に枠線を引く(box-sizing)

きっちりとブロック要素の幅を指定していたのに、枠線を引いたとたんレイアウトが崩れることがあります。 レイアウト崩れが起こる原因 これは、枠線はブロック要素の外側に引かれるためです。 例えば、横幅「10 …


comment

メールアドレスが公開されることはありません。