cssで「画像を丸くくり抜きたい」って事ありませんか？自分は結構あります

8May2019

cssで「画像を丸くくり抜きたい」って事ありませんか？自分は結構あります

こんにちは！あますた(@amaguristar)です。

WordPressに限らずサイトを作成していると、「ここの画像を丸くくり抜きたい！」って事ありませんか？　自分は結構あります。元から丸く見える画像を用意すれば良いのでしょうが、「いちいち編集するのめんどくさい！　UPした画像が自動で丸くくり抜かれて表示された方が便利」って方が中にはいるはず！　自分もそうです。面倒くさがりな自分、ちょっと調べて実施しました。

丸くくり抜くには「border-radius」プロパティ

「border-radiusプロパティ」は、基本的にボックスの角を丸くするプロパティ。使い方は簡単で、ブロックレベルでもインラインレベルでも使用可能。実際の使い方は、

200×200のBOX作成

div.box200 {
     width:200px;
     height:200px;
     margin:5px;
     padding:5px;
     border:1px solid black;
     background-color:lightgray;
     text-align: center;
     line-height: 200px;
 }

上記、200pxの正方形を例に説明すると。角をちょっと丸めるだけなら

200×200のBOX作成

div.box200 {
     width:200px;
     height:200px;
     margin:5px;
     padding:5px;
     border:1px solid black;
     background-color:lightgray;
     text-align: center;
     line-height: 200px;
     border-radius: 20px;// 追加
 }

という風にborder-radius:プロパティを追加。そのあとの20pxは20px×20pxの正方形の弧で角を丸めるという意味。分かりづらいので図で説明すると、

って事。黄色い部分の弧(白色)が実際の角の丸みです。

パラメータの設定はpx以外にも、em,pt等が使えます。つまり、画像の半分の大きさ(半分以上？)で丸く切り抜けるという事。実際にやってみると、

200×200のBOX作成

div.box200 {
     width:200px;
     height:200px;
     margin:5px;
     padding:5px;
     border:1px solid black;
     background-color:lightgray;
     text-align: center;
     line-height: 200px;
     border-radius:100px;// 変更
 }

と丸くくり貫けます。ここで「ちょっと待ってよ！いちいち画像とかボックスのサイズ気にすることすらメンドくさいんだけど？」って方、ごもっとも。自分もそうです。そして幸いな事にそれすらしなくて問題ない方法があります。

何と「border-radius:プロパティは％で設定可能！」です。つまり、画像のサイズとかを気にしないで「兎に角丸くくり抜きたいんだ！！」って時は、50%と入力するだけ。実際に使用すると、

200×200のBOX作成

div.box200 {
     width:200px;
     height:200px;
     margin:5px;
     padding:5px;
     border:1px solid black;
     background-color:lightgray;
     text-align: center;
     line-height: 200px;
     border-radius:50%;// 変更
 }

と同じ結果。これで画像だろうがなんだろうが丸く切り抜く事が可能です。この「border-radius:プロパティ」は結構複雑な形にも切り抜けるので色々試すのも面白いです。楕円形にしたり変わった形に切り抜く方法は下記リンクに詳しく載っているのでそちらを参照して下さい。便利なジェネレータ機能も作成しているみたいですし。

CSSのborder-radiusは実はすごかった！あまり知られていない機能を使用して、かっこいいレイアウトを作る方法

まとめ

まとめると画像等を丸くくり抜くには「border-radiusプロパティ」を使用。正方形の場合は「何も考えずとも50%とプロパティ設定」で問題なし。長方形の場合はお好みで！　ちなみに長方形の場合どうなるか、簡単ですが下記にメモしておきます。

200×400のBOX作成

div.box200x400 {
     width:200px;
     height:400px;
     margin:5px;
     padding:5px;
     border:1px solid black;
     background-color:lightgray;
     text-align: center;
     line-height: 400px;
     border-radius:50%;// 変更
 }

200×400のBOX作成

div.box200x400 {
     width:200px;
     height:400px;
     margin:5px;
     padding:5px;
     border:1px solid black;
     background-color:lightgray;
     text-align: center;
     line-height: 400px;
     border-radius:100px;// 変更
 }