HOME
本記事は執筆時点（2020年12月26日）の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。
border-radiusを使えばCSSだけで円を表示できる！
CSSに円を表示する専用のプロパティはありませんが実は、CSSのborder-radiusを応用すればCSSだけ円を作成することが出来ます。
border-radiusとは？
本来はborderで表示させた線に丸みを持たせるプロパティです。
例えばborderで表示させた長方形の角を丸めたい時に使用します。
値は、border-radius:00pxもしくは00％のように指定します。
&style>
#circle{
width:200px;
height:200px;
border-solid 3px red;
border-radius:10px;
}
&/style>
<div id="circle"></div>
|
|---|
border-radiusで作る円の記述の方法
記述はとても簡単で、border-radiusの値を５０％に指定することで円になります。
<style>
#circle{
width:200px;
height:200px;
border-solid 3px red;
border-radius:50%;
}
</style>
<div id="circle"></div>
|
|---|
今回はわかりやすいようにborderを指定していますが、border(線)を指定せず、border-radiusだけでもちゃんと円になります。
正方形は正円に、長方形は楕円になる
先程のような正円を表示するためには、widthとheightを同じ長さ（正方形になるように）に指定しておく必要があります。
反対にwidthとheightを異なる長さ（長方形になるように）指定したうえでborder-radius:50%にすると楕円になります。
<style>
#circle{
width:200px;
height:100px;
border-solid 3px red;
border-radius:50%;
}
</style>
<div id="circle"></div>
|
|---|
box-shadowも円になる
円にした状態でbox-shadowをしてすれば、円に沿って表示してくれます。
<style>
#circle{
width:100px;
height:100px;
border-solid 3px red;
border-radius:50%;
box-shadow:0 0 10px #333;
}
</style>
<div id="circle"></div>
|
|---|
真ん中に文字を表示するには？
border-radiusはあくまでもborder（線）を丸めているだけで、要素が丸くなっているわけではありません。
なので普通に文字を入力すると…
<style>
#circle{
width:200px;
height:200px;
border-solid 3px red;
border-radius:50%;
}
</style>
<div id="circle">円の中に文字</div>
|
円の中に文字円の中に文字円の中に文字
|
|---|
このようにはみだしてしまいます。
なので文字をうまく円の中におさめたい時は、追加で記述が必要です。
<style>
#circle{
width:200px;
height:200px;
border-solid 3px red;
border-radius:50%;
display:table-cell;
text-align:center;
vertical-align:middle;
word-wrap:break-word;
}
</style>
<div id="circle">円の中に文字</div>
|
円の中に文字円の中に文字円の中に文字
|
|---|
水平位置の中央揃えはtext-align:centerで良いですが、垂直位置の中央揃えvertical-align:middleはテーブル要素にしか使えないので display:table-cellでテーブルはないですが無理やりテーブル要素に変えて指定します。必要に応じてword-wrap:break-wordで文字を折り返すようにしておかないと、 文字数が多くなった際に円が楕円になってしまいます。
border-radiusを使ってCSSだけで画像を丸くトリミング（切り取り）する方法
画像（imgタグ）に対しても同様にborder-radius:50%を指定することで画像をトリミングすることが出来ます。
<style>
#circle{
border-radius:50%;
}
</style>
<img id="circle" src="https://cdn.pixabay.com/photo/2020/11/26/11/48/cat-5778777_960_720.jpg"></div>
|
|
|---|
しかしこの方法の場合、もとの画像が正方形でなければ正円にトリミングすることはできません。
正円にトリミングしたい場合は、backgroundを使用して表示させます。
<style>
#circle{
width:200px;
height:200px;
border-radius:50%;
background:url(画像ディレクトリ/sample.jpg)center no-repeat;
background-size:cover;
}
</style>
<div id="circle"></div>
|
|---|
background-imageを使用した方法であればもとの画像のサイズに関わらず指定したサイズの円にトリミングできるので便利です。
CSSのbackground-imageについて詳しくはこちら
まとめ
このように簡単な記述でCSSだけで円を表示することが出来ました。画像のトリミングはわざわざ画像編集ソフトを使わなくて済むので使いどころも多いのではないでしょうか？
円を使用してデザインするのであればやはりillustratorやphotoshopでの作成して画像として表示させた方がベターです。