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アソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
iPhoneもMacも簡単OK!CSSだけであなただけのAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device Generator」
CSSだけでAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device
-
1歩先へ!HTML/CSS/JSのスゴワザ・テクニック満載「Top Pens of 2014」
CodePenより、2014年注目のスゴワザ・テクニックが紹介されましたので、ご紹介します。 Co
-
HTML5/レスポンシブ/フラットデザインの無料テンプレート50(2013年分)
以前「全部無料!レスポンシブWEBデザイン制作を驀進させるレスポンシブ対応テンプレート121」という
-
コピペOK! 画像のホバーエフェクトを簡単にアニメーションさせられるimagehover.css
画像や写真にマウスを重ねたときに、アニメーションのエフェクトがかかっていると、それだけで洗練された印
-
美しいエフェクトが施されたCSSで作られたボタン12
css3で作られた美しいデザインのボタンがコレクションされていましたのでご紹介します。 優雅で目を
-
プロジェクトにすぐ使えるハイクオリティーなHTML/CSS無料テーマテンプレート集100
HTML/CSS無料テーマテンプレートでハイクオリティーなものがありましたのでご紹介します。 これ
-
トップ固定でレスポンシブ対応のナビゲーション/メニューを簡単に実装できる「Fixed Nav」
トップ固定で、レスポンシブ対応のナビゲーションが増えていますね。 これだけ増えてくると、トップ固定
-
クリックしたくなる!CSSだけで作られた無料のボンタコレクション「CSS Buttons」
CSSだけで作られた無料のボタンがコレクションされている便利なサイトをご紹介します。 Photos
-
月額ゼロ円(無料)でホームページ・ECサイトを制作・運営できるサービス12
ホームページ制作を生業としているものにとっては、穏やかではないのが「無料でホームページを制作できてし
-
無料ホームページなのにプロ並みのデザイン&高機能サイトが瞬時に作れるWix!感想と使い方
Wixという無料ホームページがつくれるサービスをご存知でしょうか。 かなり以前からあったサービスで