CSSでの円の描き方をまとめて紹介していきます。
【CSSでは以下のように円を描きます。】
.circle{
width: ◯◯px;/*幅*/
height: ◯◯px;/*高さ*/
border-radius: 50%;/*角丸*/
}
widthとheightでボックスの幅と高さを指定し、border-radius:50%で角の丸みを50%にしています。
これにより円が出来上がります。
divやpタグで円を描く
【例1】
/* HTML */
<div class="circle"></div> <p class="circle"></p>
/* CSS */
.circle{
width: 200px;
height: 200px;
border-radius: 50%;
background: blue;/* 背景色 */
}
【例1:表示例】
︎幅と高さが200pxの円が出来上がりました。背景色を指定しないと、円が見えないので注意しましょう。
spanやaタグで円を描く
【例2】
/* HTML */
<span class="circle"></span> <a class="circle" href="~"></a>
/* CSS */
.circle{
display: inline-block;
width: 200px;
height: 200px;
border-radius: 50%;
background: blue;
}
【例2:表示例】
︎ divやpタグの場合と何が違うかというと、display: inline-block;という指定がされています。
【CSSで円を描く方法についてでした】
このように円をCSSで書くことができるのでデザインの幅が広がります。
他にもHTML、CSSには多くの要素があります。これからもHTML、CSSについて記事を掲載していきます。