DEMO

HTML

		<div class="piechart">
    <div></div>
    <ol>
        <li><span class="c1">■</span><span class="ct">項目1</span>50%</li>
        <li><span class="c2">■</span><span class="ct">項目2</span>30%</li>
        <li><span class="c3">■</span><span class="ct">項目3</span>15%</li>
        <li><span class="c4">■</span><span class="ct">項目4</span>5%</li>
    </ol>
</div>

		

HTML説明

項目名の変更方法
「項目1～4(4.5.6.7行目)」のテキストを書き換えてください。

％の変更方法
「50%.30%.15%.5%(4.5.6.7行目)」の各数字を書き換えてください。

項目数を増やす場合方法
「<li>～<li>(4.5.6.7行目)」のテキストを複製してください。
<li>～<li>が1つの項目の記述になります。
増やした場合「class="c●"」の数字も増やしてください。（5つめの項目の場合「c5」）

項目数を減らす場合方法
「<li>～<li>(4.5.6.7行目)」のテキストを削除してください。
<li>～<li>が1つの項目の記述になります。

CSS

		<style>
.piechart {
    display: block;
    margin: 0 auto;
    max-width: 580px;
}
.piechart div {
    width: 350px;
    height: 350px;
    margin: 0 auto;;
    border-radius: 50%;
    background-image: conic-gradient(#2589d0 0% 50%, #5ba9f7 50% 80%, #81cbff 80% 95%, #e2e2e2 95% 100%);
}
.piechart li {
    display: flex;
    list-style-type: none;
    font-size: 12px;
    float: left;
}
.piechart li::before {
    display: inline-block;
    width: 1.2em;
    height: .8em;
    margin-right: 5px;
    content: '';
}
.ct{
    margin-right: 10px;
    font-weight: bold;
}
.c1{
    color: #2589d0;
}
.c2{
    color: #5ba9f7;
}
.c3{
    color: #81cbff;
}
.c4{
    color: #e2e2e2;
}
	
</style>
		

CSS説明

色の変更方法
グラフの色「色コード・％（12行目）」を任意のものに書き換えてください。
該当場所(#2589d0 0% 50%, #5ba9f7 50% 80%, #81cbff 80% 95%, #e2e2e2 95% 100%)
「,」で区切っている間が1つの項目となります。
1つの色コードに対して%が2つありますが、どこからどこまでがその色なのかを指定しています。

■の色「色コード（32.35.38.41行目）」を任意のものに書き換えてください。
グラフの色と合わせて色コードを書き換えてください。

項目数を増減させる場合
「色コード・％（14行目）」も同様に増減させてください。
「c●（33～35.36～38.39～41.42～44行目）」も同様に増減させてください。
「{}」の間が1つの要素になります。HTMLでc5を増やした場合は同様に増やしてください。