パーセンテージのグラフを作ってみた
完成イメージ
HTML / CSS で、このようなグラフが出来上がるまでの過程を書きます。
使用するファイル
index.html、style.cssです。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
文字コードの指定、スタイルシートの読み込みなどの記述をしました。
土台を作る
画面(1/4)
※拡大しています。
index.html
<body>
<div class="percentage-circle">
</div>
</body>
style.css
.percentage-circle {
margin: 200px auto;
height: 400px;
width: 400px;
background-color: rgba(0,0,0,0.1);
border-radius: 50%;
position: relative;
}
-
background-color: rgba(0,0,0,0.1);
背景色は、rgba(redの割合,greenの割合,blueの割合,透明度)で指定しています。
これは、「透明度が0.1の黒色」を表しています。
border-radius: 50%;
border-radiusでは、四隅の欠け具合を一括指定しています。
欠け具合を半分にすることで、綺麗な円を作ることができました。
左側が欠けた半円を重ねる
画面(2/4)
index.html
<div class="percentage-circle">
<div class="percentage-circle-overwrap"></div>
</div>
style.css
.percentage-circle-overwrap {
height: 400px;
width: 200px;
background-color: rgba(0,0,0,1);
border-radius: 0 200px 200px 0;
position: absolute;
top: 0;
left: 200px;
z-index: 1;
}
border-radius: 0 200px 200px 0;
border-radiusでは、
border-radius: 左上 右上 右下 左下; というように欠け具合を指定できます。
仮に、「border-radius: 0 0 0 0;」とすると、こうなります。
右上と右下の欠け具合が0となり、長方形となりました。
今回は、右上と左下の欠け具合を土台の円の横幅(400px)の半分(200px)にすることで、
半円を作り出しています。
半円の位置は、土台の左上を基準としています。
.percentage-circle {
margin: 200px auto;
height: 400px;
width: 400px;
background-color: rgba(0,0,0,0.1);
border-radius: 50%;
position: relative;
}
.percentage-circle-overwrap {
height: 400px;
width: 200px;
background-color: rgba(0,0,0,1);
border-radius: 0 200px 200px 0;
position: absolute;
top: 0;
left: 200px;
z-index: 1;
}
仮に、left: 0;にするとこうなります。
leftを土台の円の横幅(400px)の半分(200px)にすることで、土台にちょうど重なるようにしています。
重ねる際には、z-indexを利用します。
黒い半円にz-index: 1;をつけることで、
.percentage-circle-overwrap {
height: 400px;
width: 200px;
background-color: rgba(0,0,0,1);
border-radius: 0 200px 200px 0;
position: absolute;
top: 0;
left: 200px;
z-index: 1;
}
上に重ねることができます。
内側の円を作成する
画面(3/4)
index.html
<body>
<div class="percentage-circle">
<div class="percentage-circle-overwrap"></div>
<div class="inner-circle"><p>56%</p></div>
</div>
</body>
円の中に56%という文字を入れました。
style.css
.inner-circle {
position: absolute;
top: 52px;
left: 53px;
height: 300px;
width: 300px;
background-color: rgba(255,255,255,1);
border-radius: 50%;
z-index: 10;
}
.inner-circle p {
text-align: center;
position: absolute;
top: 80px;
left: 110px;
font-size: 40px;
}
内側の円(inner-circle)と文字(inner-circle p)の位置は、半円と同じく
.percentage-circle {
margin: 200px auto;
height: 400px;
width: 400px;
background-color: rgba(0,0,0,0.1);
border-radius: 50%;
position: relative;
}
土台の左上を基準にしています。
内側の円は、黒い半円よりも手前に来るように
z-index: 10;
を指定しています。(黒い半円のz-indexは、1)
内側の円の背景色は、
.inner-circle {
position: absolute;
height: 300px;
width: 300px;
background-color: rgba(255,255,255,1);
border-radius: 50%;
top: 52px;
left: 53px;
z-index: 10;
}
rgbaで白を指定しています。
alphaは透明度が0という意味の1を書いておきました。
56%を表現する
画面(4/4 → 完成)
index.html
<body>
<div class="percentage-circle">
<div class="percentage-circle-overwrap"></div>
<div class="inner-circle"><p>56%</p></div>
<div class="percentage-circle-lean"></div>
</div>
</body>
style.css
.percentage-circle-lean {
height: 398px;
width: 200px;
background-color: rgba(0,0,0,1);
border-radius: 0 200px 200px 0;
position: absolute;
top: 30px;
left: 200px;
z-index: 2;
transform: rotate(15deg);
}
半円のcssをコピペしたものを少しだけ編集しました。
transform: rotate(15deg);
transform: rotate(15deg); で、時計回りに15度傾けた半円を表現しています。
z-index: 2;
z-indexは、内側の白い円よりも奥にいくように、2を指定しています。(内側の白い円は、10でした。)
height: 398px;
width: 200px;
position: absolute;
top: 30px;
left: 200px;
細かい位置は、heightやwidth、topやleftで調整しています。
ソースコード
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="percentage-circle">
<div class="percentage-circle-overwrap"></div>
<div class="inner-circle"><p>56%</p></div>
<div class="percentage-circle-lean"></div>
</div>
</body>
</html>
style.css
.percentage-circle {
margin: 200px auto;
height: 400px;
width: 400px;
background-color: rgba(0,0,0,0.1);
border-radius: 50%;
position: relative;
}
.percentage-circle-overwrap {
height: 400px;
width: 200px;
background-color: rgba(0,0,0,1);
border-radius: 0 200px 200px 0;
position: absolute;
top: 0;
left: 200px;
z-index: 1;
}
.percentage-circle-lean {
height: 398px;
width: 200px;
background-color: rgba(0,0,0,1);
border-radius: 0 200px 200px 0;
position: absolute;
top: 30px;
left: 200px;
z-index: 2;
transform: rotate(15deg);
}
.inner-circle {
position: absolute;
top: 52px;
left: 53px;
height: 300px;
width: 300px;
background-color: rgba(255,255,255,1);
border-radius: 50%;
z-index: 10;
}
.inner-circle p {
text-align: center;
position: absolute;
top: 80px;
left: 110px;
font-size: 40px;
}
