個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

これは簡単!CSSだけで棒グラフ/チャートが作成できてしまう「chart.css」

これは簡単!CSSだけで棒グラフが作成できてしまう「chart.css」

CSSだけで棒グラフ/チャートが作成できてしまう「chart.css」をご紹介します。
CSSファイルをダウンロードするか、CDN経由で読み込み、規定のクラス名を記述するだけで、簡単に棒グラフ/チャートが作成できてしまいます。
カラフルなグラフや、縦書きのグラフにも対応しているのに、とても扱いやすい!
ご参考になれば幸いです。

CSSだけで簡単に棒グラフが作成できてしまう「chart.css」

「chart.css」は、CSSだけで簡単に棒グラフが作成できてしまうCSSライブラリです。
chart.cssファイルをダウンロードして読み込んで利用するか、CDN経由で読み込んでも使用することができます。

実際に使用する場合は、以下のようにHTMLを記述します。

クラス名にはcharts__chartを記述し、data-percentに値を記入すると、数値が表示されます。
グラフの長さはwidthで設定します。
このように記述すると、もっともシンプルなチャートを作成できます。

See the Pen wMammE by yugusato (@yugusato) on CodePen.

その他にも、グラフの太さ、カラーなども変更できます。

See the Pen BjNrOO by yugusato (@yugusato) on CodePen.

See the Pen MKwVPW by yugusato (@yugusato) on CodePen.

縦書きもOK!

See the Pen vLORVp by yugusato (@yugusato) on CodePen.

これは簡単ですね。
HTMLだけで作成できるので、修正も簡単です。
さらに詳しい設定方法は下記をご参照ください。
chart.css

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 2
  • 8

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

動画にCSSだけで色調補正エフェクトをかけた「dynamically colorize videos」は必見

動画にCSSだけで色調補正エフェクトをかけた「dynamically colorize videos」は必見

動画にCSSだけで色調補正エフェクトをかけた「dynamically colorize videos

記事を読む

タイポグラフィ/WEBフォントに関する作業を簡単にするツール14

WEBフォントがどんどん使われるようになるにつれ、関連するツールもたくさん出来てきています。 多い

記事を読む

通信量無制限!? 隣近所のWiFiをシェアして利用し放題にする注目のサービス「シェアWiFi」

通信量無制限!? 隣近所のWiFiをシェアして利用し放題にする注目のサービス「シェアWiFi」

隣近所のWiFiをシェアして利用し放題にする注目のサービス「シェアWiFi」がリリースされました。

記事を読む

波打つようなクリックエフェクトを実装できる「Waves」

今回はクリックしたときに、静かな湖面を指で触れて波打つようなエフェクトを実装できるライブラリーをご紹

記事を読む

JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつける方法

JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつけられる方法をご紹介します。 パララ

記事を読む

CSSの手入力が不要になる便利なCSSジェネレーター「ENJOY CSS」

CSSの手入力が不要になる!複数の機能が1つになったCSSジェネレーター「ENJOY CSS」

CSS3になってから便利なジェネレーターが次々に登場していますが、今回ご紹介するジェネレーターはひと

記事を読む

HTML5ビデオにも対応できる無料動画変換ツール/コンバーター10

HTML5ビデオを利用したサイトも見かけるようになってきました。 今後はHTML5ビデオを利用する

記事を読む

人気のHTML/CSSコードサンプル25+おまけ2 from CodePen

CodePenはHTML,CSS,JSのコードサンプル配布サイトです。 紹介されているコードの種類

記事を読む

無料のファイル転送ツールの決定版?容量無制限・件数無制限・ハイスピードの「Infinit」

ファイルを転送するとき、どんなツールを利用していますか? DropBoxやFireStorageな

記事を読む

美しいCSSグラデーションをランダムにつくってくれる「Random CSS Gradient Generator」

美しいCSSグラデーションをランダムにつくってくれる「Random CSS Gradient Generator」

ズボラな自分に最適なCSSグラデーション作成ツールがあったので、ご紹介します。 グラデーションを自

記事を読む