CSSだけでサムネイルなどの画像を丸く見せる方法

サムネイル画像を丸く見せたいとき、CSSだけで簡単にできるんですが、意外と知らない人も多いのかなと思ったのでご紹介します。

WEBデザインを専門でやってる人からしたら大したことじゃないんですが、ブログ運営者などのCSSに疎い方に向けてソース付きで解説します。

サムネイル画像を丸く見せる

例えば記事一覧画面などでサムネイルが丸くなってると、可愛いかったりポップだったり、そんな印象を与えることができます。

▼サムネイル画像の比較サンプルです。角丸にすると四角いサムネイルと違った柔らかい雰囲気のデザインになります。

ソースはこんな感じ。

.thumbnail img {
  border-radius: 20px;
  height: 40px;
  width: 40px;
}

まず画像の外側にdivなどを置いてクラス名を付けます。上記のソースはそれを前提としたものになってますので、「thumbnail」というクラス名の箱の中に入ってるimgタグ(画像)という意味です。

丸くしたい箇所のimgタグに幅と高さを設定して、その半分の角丸(border-radius)を付けてあげると丸く見せることができます。

ちなみに、角丸の数字はオーバーしてもなにも問題ないので、僕はここで幅・高さと同じ値にしちゃったりもします。数字が中途半端だと計算めんどくさかったりするんですよ。

さらに言うと、高さも要らないです。幅だけでも大丈夫。

画像自体を加工せずに済むので、あとで四角に戻したいときもCSSで1行削除するだけです。

この画像を加工しなくていいっていうのがポイントで、画像をいちいち丸く作ってたら手間がかかりすぎるし、四角くしたいときに取り返しがつかないんです。

【追記 2015/02/27】border-radiusは50％でもいいそうです。僕はやったことがなかったので全然知りませんでした。

border-radius: 50%; だと計算も要らないし、画像の大きさ変わってもそのままでいいので、楽ちんだよ。 / “CSSだけでサムネイルなどの画像を丸く見せる方法 | delaymania”

— Otchy (@otchy) 2015, 2月 26

情報提供ありがとうございます！

僕も良く使ってる便利な方法なので、ぜひお試しください。

この記事を読んだ方におすすめしたい記事はこちらです。