conic-gradientで何ができる？円形の色表現をWEBで使う方法

WEBサイトで円を扇形に塗り分けたり、円周に沿って色が変わる背景を作ったりしたいときは、CSSのconic-gradient()が使えます。画像を用意せずに色の境目や角度を指定できるため、円形の装飾や進捗表示に応用できます。ここでは色が変わる仕組みと、65%の達成率を円形で示す具体例、利用時の注意点を説明します。

conic-gradientは中心の周りに色を並べる

conic-gradient()は、CSS（WEBページの見た目を指定するルール）で扇形のグラデーション画像を作る関数です。linear-gradient()が直線に沿って色を変え、radial-gradient()が中心から外側へ色を広げるのに対し、conic-gradient()は中心の周りを回る方向に色を配置します。

角度を指定しない場合は上側の12時方向が始点で、時計回りに進みます。90degは円の4分の1、180degは半周、360degは1周です。from 90degと書けば始まる方向を右側へ回せます。

色の境目を離して指定すれば途中で色がなめらかに変わり、隣り合う色を同じ角度で切り替えれば、くっきりした扇形を作れます。この方法は、円形の模様やカラーホイールの装飾にも使えます。ただし、conic-gradient()自体は画像として扱われる値なので、指定するのはbackground-imageなどであり、background-colorではありません。

65%の学習進捗を円形で示すCSSの例

オンライン講座で20レッスン中13レッスンを完了した場合、達成率は65%です。1周360度の65%は234度なので、0〜234度を完了部分、234〜360度を未完了部分として塗り分けます。完了部分に濃紺■#0F172A、残りに青みのあるグレー■#64748Bを使います。

<div class="lesson-progress">
  <div class="lesson-ring" role="progressbar"
       aria-label="レッスンの達成率"
       aria-valuemin="0" aria-valuemax="100"
       aria-valuenow="65">
    <span aria-hidden="true">65%</span>
  </div>
  <p>20レッスン中13レッスンを完了しました。</p>
</div>

.lesson-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  color: rgb(30 41 59);
  background-color: rgb(255 255 255);
}
.lesson-ring {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-color: rgb(100 116 139);
  background-image: conic-gradient(
    rgb(15 23 42) 0deg 234deg,
    rgb(100 116 139) 234deg 360deg
  );
}
.lesson-ring::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background-color: rgb(255 255 255);
}
.lesson-ring span {
  position: relative;
  z-index: 1;
  font-size: 2rem;
  font-weight: bold;
}

border-radius: 50%で外側を円にし、::beforeという疑似要素で中央に白■#FFFFFFの円を重ねると、ドーナツ状の進捗表示になります。中央の65%と説明文は濃い青灰色■#1E293Bで表示します。これはグラデーションそのものが輪になるのではなく、中央を別の要素で覆う作り方です。

円形表示で見落としたくない色と情報の確認

この例では、完了部分の濃紺と残りのグレーのコントラスト比は約3.75:1、グレーと周囲の白は約4.76:1です。隣接する部分の区別に関係するWCAG 2.2の非テキストコントラスト基準3:1を上回ります。また、中央や説明文の濃い青灰色と白の比率は約14.63:1で、通常サイズの文字の目安4.5:1を上回ります。実際のページでは表示サイズやほかの背景色も確かめてください。

進捗率は色だけで伝えず、中央の数値と「20レッスン中13レッスン完了」という文章でも示します。上のコードのrole="progressbar"とaria-valuenow="65"は、支援技術へ現在の進み具合を知らせるための指定です。データが変わったら、角度・数値・完了数・aria-valuenowを必ず一緒に更新します。CSSだけで実際の完了数が自動計算されるわけではありません。

円形の色表現を単なる飾りに使う場合と、数値を伝える場合では必要な確認が異なります。複数項目を表す円グラフとして利用するときも、項目名と値を文章や表で用意しましょう。HueRollでは元の色候補や選択色と白・黒とのコントラストを確認できますが、任意の2色間やグラデーション全体を自動判定する機能ではありません。完成した表示を実際の隣接色で確かめることが大切です。