CSSで円を描く方法【初心者向け】

CSSで円を描く方法【初心者向け】

投稿日 : 2017.8.1 最終更新日時 : 2017.9.21 投稿者 : kinukawahiroyasu カテゴリー : CSS, HTML

CSSで円を描く方法

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について記事を掲載していきます。