こんにちは、「なゆた」です！
突然ですが、皆さん企業のサイトを見ていると、
実績などを伝えるグラフが出てくることってありますよね？
今回はCSSを使って、「円グラフ」の作り方をお教えします！
グラフの作り方を知りたい人
使い方
conic-gradient
まず「ボックス」と同じく、HTML上でdivタグを作ります。
もちろんdiv以外にタグはいらないですし、文字は何も入れなくてもOKです。
次に、CSS上の作業です。幅と高さは自由ですが、どちらも一緒にしなければいけません。
また、角を丸めるために使う「border-radius」は50%にしないと、真ん丸にはなりません。
そしてbackgroundを付けて、「conic-gradient」で割合を作ります。
例えば起点0%〜50%を赤、残り半分の50%〜100%を超薄い灰色としましょう。
すると、あっという間に50%（※例です）の円グラフが出来上がりました！
radial-gradient
さらに、「conic-gradient」に加え「radial-gradient」を付け加えることも可能です。
すると、円グラフに穴が開いちゃいました！
ちなみに50%・51%（※例です）は、円グラフの穴の大きさのことです。
文字を加える方法
conic-gradient
これらの円グラフには、文字を加えることもできます。
まず、HTML上のdivタグ内にspanタグを加え、文字を入力します。
次に、divタグのCSSに「position」を追加します。
さらに、spanタグのCSSも作ります。上と右の位置や、文字の大きさ・太さは自由です。
すると、グラフに文字が付き、割合が目で見て分かるようになりました！
radius-gradient
グラフに穴が開いた「radius-gradient」に文字を加える場合・・・
まず、HTML上のdivタグ内に、「spanタグ抜きで」文字を入力します。
次に、divタグのCSS内に、新たに「display: flex;（横並び）」「justify-content: center;」「align-items: center;」を加えます。そうしないと穴の中に文字が入りません。文字の大きさ・太さは自由です。
すると、円グラフの穴の中に文字が入りました！こういうグラフの見せ方もあるんです。
最後に
いかがでしたか？
皆さんもぜひ、この円グラフをサイト作りで実践してみてください！
以上です、ありがとうございました！
コメント