ログイン

問題20 円グラフを作成しよう

HTML_CSSの問題

HTML_CSS

CSSをうまく使えば、円グラフも作ることができます。 これまでの問題を通して、円形自体は作れるようになっていると思うので配色の仕方も覚えていきましょう!

円グラフを作成しよう

問題

円グラフを作成しましょう。

見本画像を参考にして実装してください。

自分の環境に書くコード

              <div class="radius"></div>
¥HTML¥
            

期待する画面

コードのアイコン

解答ソースコード

              <div class="radius"></div>
¥HTML¥
            
              .radius {
  width: 340px;
  height: 340px;
  background: conic-gradient(red 0% 25%, yellow 25% 50%, blue 50% 100%);
  border-radius: 50%;
}
¥CSS¥
            
答えのアイコン

解説

background: conic-gradient(red 0% 25%, yellow 25% 50%, blue 50% 100%);
の行でグラフを表現しております。

プロパティには、色の選択と開始と終了を決めるだけです。
ログインして解答を見る
円形を作るには正方形の要素に対して
border-radisu: 50%;を付与してあげれば作ることが出来ました。

要素を4分割してborder-radisu: 50%;を付与して作ることもできますが、
それだとかなり手間がかかってしまいます。

こういう時は今回登場したconic-gradient関数を使用することで簡単に表示させる事ができます。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!