どうもチャーさんです。
あなたはワードプレスで丸を表示したいと
思ったことはありませんか。
この記事では丸の作りかたを解説してるので
ワードプレスなどで丸を表示したい人はどうぞ。
スポンサードサーチ
丸を作るにはこのコードでできます。
まずいきなり結論ですが、
丸を表示するコードはこうです。
<div style=”border: 10px solid blue; height: 100px; width: 100px; border-radius: 50%; margin: auto; text-align: left;”> </div>
これをテキストエディタにはるとこのように丸が作れます。
↓
丸みを出すにはborder-radius
それでは少し補足していきます。
丸を作るには、borderで作った線を丸くします。
そのborderで表示した線を丸くするのに使うのが、
border-radiusというタグです。
これを使うとborderの境界線を丸くできます。
例を出すとこんな感じです。
border-radiusなし版
<div style=”border: 10px solid blue; height: 100px; width: 100px;;”> </div>
(以下のように表示されます)
↓
これにborder-radiusを付け加えると
<div style=”border: 10px solid blue; height: 100px; width: 100px; border-radius: 50%; “> </div>
(以下のように表示されます)
↓
こんな風に角が丸まってくれます。
そしてborder-radiusは後ろにpxや%をつけるのですが、
この数値を大きくすればするほどより角が丸くなります。
数値が小さいと角の丸みが少ないです。
試しに１つ数値を小さめにしたものを乗せておきます。
<div style=”border: 10px solid blue; height: 100px; width: 100px; border-radius: 10px; “> </div>
↓
ちょっとだけ丸みがかりましたね。
こんな風に数値をコントロールすれば、
丸みをコントロールできます。
完全に丸くするには冒頭でお話した通り、
border-radiusの数値を50%にすればいいです。
また１つ注意点として、
綺麗な丸を作るには高さと幅を同じにする必要があります。
コードを見てください。
<div style=”border: 10px solid blue; height: 100px; width: 100px; border-radius: 50%; “> </div>
widthとheightがそれぞれ100pxになっていますよね。
これを同じ数値にして四角形を作り、
それをborder-radiusで丸くしないと
丸にならないので注意してくださいね。
スポンサードサーチ
まとめ
それではまとめに入ります。
丸を作りたい場合は以下のコードをそのままコピペしましょう。
<div style=”border: 10px solid blue; height: 100px; width: 100px; border-radius: 50%; “> </div>
そして丸みを調整したいときは、
border-radiusの後ろの数値を変えてください。
数値を小さくすると緩やかな丸みに
数値を大きくするとより丸くなります。
それでは丸の作りかたは以上です。
読んでもらってありがとうございました。
チャーさん
