CSSを使ってプロフィールやサムネイルの画像を丸く切り抜く方法

      2014/08/06

最近よく見かける、プロフィールの画像やサムネイルの画像なんかを丸く切り抜いたデザイン。これは丸く切り抜いた画像ではなく、CSSを使って画像の枠を丸くしているんです。この方法を使って、あなたのサイトもお洒落にかざりましょう!

medium_7392497100
photo credit: Funky Tee via photopin cc

フラットデザインが流行して以降、プロフィールの画像やサムネイルの画像なんかを丸く切り抜いたデザインを見ることが多くなりましたよね。そういうわたしも、この丸く切り抜いたデザインを好んで多用しています。

「これって、丸く切り抜いた画像を使っているんでしょ?」って、つい最近まで思っていたのですが、よくよく見てみるとじつはそうではなくて、CSSを使って丸く切り抜いているんですよね。

今回はその、CSSで画像を丸く切り抜く方法をご紹介します。思ったより簡単に設定できちゃいますよ。

スポンサーリンク

CSSでプロフィールやサムネイルの画像を丸く切り抜く方法

まずは、丸く切り抜く対象の画像を配置しましょう。

はい、やる気がまったく見えない画像でスミマセン。ちなみに、上に配置した画像のHTMLを以下のようにしたとします。

では、この画像を対象に、丸く切り抜いてやりましょう!それには「border-radius」というプロパティを利用します。

border-radiusは、指定した値を半径とした分だけ、角が丸く装飾されます。なので、画像を円形に切り抜きたい場合は、画像サイズの半径を指定してやればいいことになりますね。ちなみに今回は縦横300pxの画像ですので、その半径の150pxの長さで指定しています。

あと、「-moz-…」や「-webkit-…」といった記述があると思いますが、これらは主要ブラウザ毎の拡張機能であることを明示するための識別子で「ベンダープレフィックス」と呼ばれるものになります。

詳しくは、以下のサイトで解説されていますので参考していただければと思いますが、とりあえずはあまり深く考えずに、おまじないのようにそのまま使っておいていただければOKです。

ベンダープレフィックス-CSSの基本
拡張機能であることを明示するための識別子 …

そして、border-radiusを使って丸く切り抜いた画像がこちらです。

なお、設定する値は、長さの数値かもしくは、パーセンテージを指定することができます。なので、50%と指定しても同じようにきれいな円にすることができますね。むしろパーセンテージのほうが、対象となる画像サイズに依存せずに指定することができますので、汎用的でいいかも。

もちろん、border-radiusに指定する値を小さくしてやれば、画像の角を取る感じにすることもできます。

あともうひとつ、ちょっとしたテクニックを。画像を配置しているdiv要素に枠線(border)を指定して、div要素にもborder-radiusを指定してやると、円形の縁取りを入れることができますよ!

border-radiusを利用する際の注意点

今回ご紹介したborder-radiusというプロパティーは、CSSのなかでもCSS3という新しい規格で追加されたプロパティになります。

そしてこのborder-radiusプロパティーは、古いブラウザに対応しておらず、特にInternet Exproler 8(IE8)以前のブラウザには対応していないと言われています。

※その他、CSS3のブラウザ対応状況は、下記のサイトで確認することができます。
HTML5 & CSS3 Web Design

先日、Windows XPがサポート終了になりましたので、今後IE8以前のブラウザ利用率は下がっていくことが予想されますが、「対応していないブラウザがある」ということは認識しておいてください。

さいごに

ほんの数日前のことですが、当ブログのアクセスデータを見ていると、「画像」「丸く」「円」のようなキーワードで、当サイト内を検索されているような形跡があったんです。結構、当ブログでは多用してますからねぇ。「ちょっと真似してみようかな?」と思っていただけたのかな。

その方がまた当ブログを訪れていただけるかわかりませんが、この記事が少しでもお役に立てれば幸いです。

こちらの記事もいかがですか?

そのほか、STINGER3のカスタマイズについてまとめてみました。

わたしがSTINGERでカスタマイズしたことをまとめてみた

 - ブログカスタマイズ

スポンサーリンク

  関連記事

気持ちいいエフェクトのスライドメニュー「Off-Canvas Menu Effects」を入れてみた

スライドメニューを表示するときのエフェクトが気持ちいい「Off-Canvas Menu Effect …

CSSとWEBフォントだけで作ったSNSシェアボタンをSTINGER3に入れてみた

CSSとWEBフォントだけで作ったSNSシェアボタンを、STINGER3に導入する方法をご紹介します …

STINGER3のフッターを3カラムにカスタマイズしてみた

個人のブロガーは、記事の執筆はもちろんのことながらブログのデザインにも多少は気を配って、自分でカスタ …

STINGER3のtitleタグ先頭に入る改行とスペースを消してみた

photo credit: Huasonic via photopin cc 実はさっき気がついてし …

WordPressのコメント欄をデフォルトからFacebookに変更してみた【STINGER3】

当ブログですが、まだそれほどアクセスは無いはずなのにしばしばスパムコメントが入ってきます。不思議です …

わたしがSTINGERでカスタマイズしたことをまとめてみた
わたしがSTINGER3でカスタマイズしたことをまとめてみた

STINGER3をテーマにした当ブログで、わたしがこれまでに実装したカスタマイズの内容を、まとめてご …

WordPressでメディアを挿入のリンク先を最初からなしに設定する方法

WordPressで投稿の本文に画像メディアを挿入する時、リンク先をメディアファイルではなく、最初か …

STINGER3の「関連記事」表示を横並びにカスタマイズしてみた

STINGER3の「関連記事」表示を横並びにカスタマイズする方法をご紹介します。必要以上に縦長になっ …

WEBフォントで簡単に!STINGER3の細かいところにアイコンを入れてみた

WEBフォントを使って、簡単にアイコン装飾を行う方法をご紹介します。細かいところまでに気をつかえば、 …

WordPressのテーマをSTINGER3に変更してみた

ブログを始めて少なくとも数ヶ月はほとんどアクセスなんてありませんよっ!なーんてことは重々承知のつもり …