2015/12/10
これは簡単!CSSだけで棒グラフ/チャートが作成できてしまう「chart.css」
CSSだけで棒グラフ/チャートが作成できてしまう「chart.css」をご紹介します。
CSSファイルをダウンロードするか、CDN経由で読み込み、規定のクラス名を記述するだけで、簡単に棒グラフ/チャートが作成できてしまいます。
カラフルなグラフや、縦書きのグラフにも対応しているのに、とても扱いやすい!
ご参考になれば幸いです。
CSSだけで簡単に棒グラフが作成できてしまう「chart.css」
「chart.css」は、CSSだけで簡単に棒グラフが作成できてしまうCSSライブラリです。
chart.cssファイルをダウンロードして読み込んで利用するか、CDN経由で読み込んでも使用することができます。
|
1 2 3 4 5 |
<!-- Downloaded chart.css --> <link rel="stylesheet" href="chart.css"> <!-- RawGit CDN chart.css --> <link rel="stylesheet" href="httpss://cdn.rawgit.com/theus/chart.css/v1.0.0/dist/chart.css" /> |
実際に使用する場合は、以下のようにHTMLを記述します。
|
1 2 3 4 5 6 |
<div class="charts"> <div class="charts__chart" data-percent="100%"></div><!-- /.charts__chart --> <div class="charts__chart" data-percent="60%" style="width: 60%"></div><!-- /.charts__chart --> <div class="charts__chart" style="width: 40%"></div><!-- /.charts__chart --> <div class="charts__chart" style="width: 10%"></div><!-- /.charts__chart --> </div><!-- /.charts --> |
クラス名には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
Sponsored by
お役に立てましたら、以下どれでも結構のですので、ポチリと……。
Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
CSSを丸裸にして見やすく統計的に整理してくれる「CSS STATS」
サイトのCSSを解析してくれるサービスってたくさんありますが、項目ごとに見やすくまとめてくれて、活用
-
-
リボン風の見出しをCSS3だけで実装する方法
見出しでリボン風の装飾をCSS3だけで実装する方法をご紹介します。 利用するのはboderプロパテ
-
-
レスポンシブ対応のコンテンツスライダー/スライドショーベスト8
以前の記事「レスポンシブ対応などコンテンツスライダー/スライドショー用jQueryプラグイン50+」
-
-
未知との遭遇!クリックするたび何かに役立つサイトを紹介する「Random Useful Websites」
クリックするたび何かに役立つサイトを紹介してくれるサイトをご紹介。 このサイト、まったく自分の興味
-
-
table作成の決定版!html/cssで素早く手軽に表組みをしたいなら「Tables Generator」がおすすめ!
html/cssでtableを組むのって、手間がかかりますよね。 そんなとき便利なのがジェネレータ
-
-
プログラミング・コーディングの作業効率UP!ミスを激減させる見やすいフリーフォント18
プログラミングやコーディングするとき、どんなフォントを使っていますか? 私の場合、Coda 2とい
-
-
CCSだけで見出しに自動で連番を記入する方法
当ブログでは「◯◯100」といった感じの記事をよく書かせていただいています。 こうしたとき、以前ま
-
-
コピペで完了!12種類のプログレスバーを簡単に導入できるPACE.js
すでに当サイトにも導入してみたのですが、お気づきでしょうか。 PC版で当サイトをご覧いただくと、画
-
-
激易!YouTubeなどの動画やGoogleMapsをコピペだけでレスポンシブ化「Embed Responsively」
YouTubeやViemoなどの動画、あるいはGoogleMapsをコピペだけでレスポンシブ化できて
-
-
レスポンシブWEBデザインの確認に最適!スマホ・タブレットでの表示を一度に確認できる「Responsinator」
レスポンシブWEBデザインの確認に最適なツールをご紹介します。 このツールを使えば、スマホやタブレ
