ホームページ制作,WEB戦略,効果UP,岡山のニッティグリッティ

お役立ち

ニッティ・グリッティの

お役立ち情報

アイコンで進捗％を表示する方法(その3)

UPDATE : 2021.7.7

投稿者 : ニッティ・グリッティ

コーディング

前回までで、どのように進捗状況を表現しているのかを説明しました。

もうすこし手を入れていきましょう！

HTMLはこんな感じですね

HTML

<main>
<section>
  <div class=charts-1>
    <div class=chart-shapes>☆</div>
    <div class=chart-values></div>
    <span class=chart-labels>30%</span>
  </div>
  <div class=charts-1>
    <div class=chart-shapes>☆</div>
    <div class=chart-values></div>
    <span class=chart-labels>40%</span>
  </div>
  <div class=charts-1>
    <div class=chart-shapes>☆</div>
    <div class=chart-values></div>
    <span class=chart-labels>50%</span>
  </div>
  <div class=charts-1>
    <div class=chart-shapes>☆</div>
    <div class=chart-values></div>
    <span class=chart-labels>60%</span>
  </div>
</section>

そして、cssはこんな感じでした。

isolation:isolate:というのは、mix-blend-modeに含めるかどうかを決めているようです。

isolateにすると、含めない設定になりますので、背景の色と混ざりません。

あとは、位置を微調整している感じですね。

こうすることで、アイコンで進捗％を表示することができるんですね。

CSS

section {
  height: 90px;
  margin: 40px auto;
  text-align: center;
  width: max-content;
}

body{ text-align: center; }

main { margin-top: calc(50vh - 175px); }

.chart-labels {
  isolation: isolate;
  font-family: courier;
}

.charts-1, .charts-2, .charts-3 {
  width: 90px;
  height: 90px;
  display: inline-grid;
}

/* first row */

.charts-1 {
  background: white;
}

.charts-1 *{
  height: inherit;
  grid-area: 1 / 1;
}

.charts-1 .chart-shapes {
  font-size: 90px;
  line-height: 90px;
  text-align: center;
  color: red;
  font-weight: bolder;
}

.charts-1 .chart-labels {
  margin-top: calc(45px - .2em);
  font-size: 7pt;
  color: red;
} 

.charts-1 .chart-values {
  background: conic-gradient(transparent 30%, lightgrey 30%);
  mix-blend-mode: screen;
}

.charts-1:nth-of-type(2) .chart-values {
  background: conic-gradient(transparent 40%, lightgrey 40%);
}

.charts-1:nth-of-type(3) .chart-values {
  background: conic-gradient(transparent 50%, lightgrey 50%);
}

.charts-1:nth-of-type(4) .chart-values {
  background: conic-gradient(transparent 60%, lightgrey 60%);
}