コーディングの基本!CSSで円を作る方法
WEB製作では円をよく使うのでこの機会にやり方を覚えておこう。

divタグかspanタグを使用

円を作るにはdivタグかspanタグを使用します。

どちらを使用するかはページのデザインで変わります。

円を縦並びで配置するならdivタグを。

円を横並びで配置するならspanタグを使用します。

divで円を作る

円を作りたい要素に「border-radius: 50%;」を指定するだけ。

border要素がなくてもborder-radiusを使用できます。

【注意】
widthやheight、background-colorを忘れず指定しましょう。

大きさを指定しないと円は作れません。

background-colorで色を指定しないと透明色になり見えません。とりあえず、何色でも良いので背景色をつけておこう。

 

spanで円を作る

作り方はdivタグの時とほとんど一緒です。

「border-radius: 50%;」と追加で「display: inline-block;」を指定します。

「display: inline-block;」を忘れると円が作れないので気をつけましょう。

後は、width、height、background-colorを指定します。

円を真ん中に配置する

円を中央寄せにする方法はdivとspanではやり方が違います。

divの場合

divを使った円を真ん中に配置するには、「margin: 0 auto;」で指定します。

divで作った円はブロック要素になるのでmargin: 0 auto;で中央揃えにできます。

spanの場合

spanを使った円を真ん中に配置するには、円の親要素text-align: center;を指定します。

Twitterでフォローしよう

おすすめの記事