Welcome

カキノタblog

自分の興味あるテーマを中心に、図解多めに記事を作成していきたいと思います。

基本図形 CSSで円を描く

Html+CSSで円(丸)を描く方法。

コード

Html

<div class="circle"></div>

CSS

.circle{
	width: 200px;
	height: 200px;
	border : 1px solid;
	border-radius: 50%;
}

結果

 

ノート

  • 円のベースとなるのは<div>
  • まず200 x 200のサイズを決定する
  • border属性に1pxの枠線をつける
  • border-radiusを50%にすることでdivの角を丸める

https://developer.mozilla.org/ja/docs/Web/CSS/border-radius