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;を指定します。
PokerChoice