個人的に役立ったデザイン素材や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アソシエイト・プログラムの参加者です。

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

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

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

記事を読む

WordPressで格安レンタルサーバーを選ぶなら?エックスサーバーかミニバードがおすすめ!

WordPressにベストな格安レンタルサーバーはこれです!

WordPressでレンタルサーバーを選ぶ場合のおすすめサーバーご紹介します。 新しくWordPr

記事を読む

jQueryベストプラグイン2014 使えるプラグイン50選をご紹介

jQueryベストプラグイン2014 使えるプラグイン50選をご紹介

2014年に登場したベストなjQueryプラグインを50個ご紹介します。 レイアウト系のプラグイン

記事を読む

クリックしたくなる!CSSだけで作られた無料のボンタコレクション「CSS Buttons」

クリックしたくなる!CSSだけで作られた無料のボンタコレクション「CSS Buttons」

CSSだけで作られた無料のボタンがコレクションされている便利なサイトをご紹介します。 Photos

記事を読む

これは魅力的!CSSだけで実装できる画像ホバーエフェクト20

これは魅力的!CSSだけで実装できる無料の画像ホバーエフェクト22

CSSだけで実装できる魅力的な画像用のホバーエフェクトをご紹介します。 種類は全部で22種類です。

記事を読む

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法をご紹介します。 リボン関連に

記事を読む

UIデザインのリニューアル前と後を比較できるギャラリーサイト「Android UX before and after」

UIデザインのリニューアル前と後を比較できるギャラリーサイト「Android UX before and after」

UIデザインのリニューアルの前と後をひと目で比較できるギャラリーサイトをご紹介します。 Googl

記事を読む

トップ固定でレスポンシブ対応のナビゲーション/メニューを簡単に実装できる「Fixed Nav」

トップ固定で、レスポンシブ対応のナビゲーションが増えていますね。 これだけ増えてくると、トップ固定

記事を読む

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

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

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

記事を読む

使える!2015年時点で最高の無料HTMLフリーテンプレート50+

使える!2015年時点で最高の無料レスポンシブ用フリーテンプレート50+

2015年時点で最高の無料レスポンシブ用フリーテンプレートをご紹介します。 今回ご紹介する無料のH

記事を読む