ホームページに使う写真を丸抜きする方法

画像をCSSで丸抜きする方法

画像というのは基本的に四角いものです。カメラで取った写真も枠は四角くなりますし、画像処理ソフトで何かの画像を保存したときも四角い領域で保存されます。世の中にあふれる画像はほとんどが四角いです。

でも四角い画像が一般的なだけに、逆に違った形の画像を使用すればちょっと目を引くアクセントになりますよね。人物の写真なんかは丸抜き表現がとても合っています。商品紹介にも使えそうですね。要所要所で使用していけば印象のよいホームページを作ることが可能です。

 

丸抜き処理はCSSで簡単にできる

昔はホームページに掲載する画像の丸抜き処理は、画像そのものを加工して施すことが多かったんですが、いまではCSSで簡単に指定することができるようになりました。

それはズバリ! border-radiusプロパティです!

記述も極めて簡単な上に、半径の指定も自由自在、さらに四隅それぞれの半径を別に指定することもできるので、加工の幅がかなり広がります。何より画像そのものに加工するわけではないので、「この丸抜きちょっと違うな」ってときに簡単に戻せるのもメリットですよね。

ここでは、そのborder-radiusプロパティのいろんな使い方について見ていきましょう!

 

border-radiusを使ったいろんな丸抜き処理の方法

1.正方形の画像を丸くしたいとき

正方形画像

最近決まったばかりの2020年東京オリンピックマスコットキャラクターの画像でみていきましょうー。

 
正方形の画像を真ん丸にするのが一番簡単です。CSSで { border-radius: 50%; } を指定するだけ。めちゃくちゃシンプルですね。たったこれだけで丸抜き画像が実現できちゃいます。

正方形画像
img { border-radius: 50%; }

 
ここで記述している50%っていうのは、切り抜く円の半径の指定になります。50%と書けば「画像の1辺の長さの半分」を半径に切り抜くので、4隅にそれをすることで真円になるわけですね。この使い方が一番使用頻度が高いと思います。

ちなみにこの50%っていう数字を変えると、真ん丸ではなく、ちょい丸みたいな感じにすることが可能。

正方形画像
img { border-radius: 30%; }

 
正方形画像
img { border-radius: 10%; }

ちなみに50%以上の数字を指定しても、50%のときと同じ真円にしかなりません。

 

2.長方形の画像を丸くしたいとき

長方形

こういった長方形の画像の場合、border-radius: 50%; を記載するとこんな感じになります。

長方形
img { border-radius: 50%; }

 
元々の画像の縦横の長さが違うため、{ border-radius: 50% } だと、同じ50%でも半径に差が出てくるため、こういった形で楕円になります。

もし削っている部分を楕円ではなく真円にしたい場合は、次のようにパーセンテージではなく絶対値で指定すればOKです。

長方形
img { border-radius: 100px; }

 

3.長方形の画像で、好きな位置で円を切り取りたいとき

長方形

この画像で左側の青いキャラクターだけを丸く切り取りたいとき。これを実現したいときは、ちょっとだけ記述が面倒になります。imgタグで表示させていた画像を、pなどのブロック要素の背景画像扱いにする必要があります。

 

p {
background-image: url(‘画像のURL’);
background-position: left top;
width: 150px;
height: 150px;
border-radius: 50%;
}

画像を背景に指定したあと、左上を基準にして150pxの正方形を切り取り、それをさらに真円に切り取っています。この手法を使えば切り取り円の位置も大きさも自由自在です。

 

4.切り取った円に枠をつけたいとき

正方形画像
img {
border-radius: 50%;
border: 3px solid #0000FF;
}

枠を付けたいときは普通にボーダー指定するだけ。これも簡単ですね。

 

5.四隅それぞれの切り取り円半径を指定したいとき

正方形画像
img { border-radius: 100px 0px 50px 20px / 100px 0px 50px 20px; }

記述の仕方をこのように変えると、4隅それぞれの切り取り円半径をバラバラに指定することができます。スラッシュ前の数字が水平方向の半径の長さを、スラッシュ後が縦方向の半径の長さを、それぞれ左上の隅から時計回りに順番に指定していく感じ。対角になる隅を真円で切り取ることで、葉っぱみたいな形になりましたね。

 
正方形画像
img { border-radius: 120px 55px 190px 140px / 70px 150px 80px 70px; }

四隅を水平方向・縦方向にてんでバラバラの数字で指定するとこんな感じになります。もはや丸抜きにはまったく見えませんが。うまく使えばオシャレなホームページに見えなくもないかも?

 

まとめ

とにかく便利で簡単です、border-radius プロパティ。真円で切り取りたいときはもちろん、楕円や葉っぱのような形も作れます。いちいち画像そのものを加工するやり方にくらべてかなり簡単な上に実用的です。

ぜひ活用してみてくださーい!