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アソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
レスポンシブ対応済みサイトがApple Watchに対応しているかどうかがわかる「the ultimate responsive test」
Apple Watchがいよいよ発売になります。 ところで、あなたのレスポンシブ対応済みのサイトは
-
Chromeのタブをクリックするだけで音声を消す方法
Google Chromeのタブをクリックするだけで音声を消す方法をご紹介します。 Chromeの
-
便利すぎる!商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始
商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始しました。
-
タイポグラフィ/WEBフォントに関する作業を簡単にするツール14
WEBフォントがどんどん使われるようになるにつれ、関連するツールもたくさん出来てきています。 多い
-
iPhoneもMacも簡単OK!CSSだけであなただけのAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device Generator」
CSSだけでAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device
-
背景画像をフルスクリーン&レスポンシブ対応にする方法
背景画像をスクリーンいっぱいに表示しているサイトが増えているとはいえ、いま見てもインパクトがあります
-
一石二鳥!ベンダープレフィックスをブラウザ上で追加し、CSSのミスも指摘してくれる「Autoprefixer」
ベンダープレフィックスvendor prefixesをブラウザ上で追加してくれたうえで、CSSのミス
-
いまさら聞けない無料のアイコンフォントの導入の仕方・使い方
アイコンフォントを今頃になってようやく使ってみました。 最初は正直よくわからず、戸惑ってしまいまし
-
波打つようなクリックエフェクトを実装できる「Waves」
今回はクリックしたときに、静かな湖面を指で触れて波打つようなエフェクトを実装できるライブラリーをご紹
-
未知との遭遇!クリックするたび何かに役立つサイトを紹介する「Random Useful Websites」
クリックするたび何かに役立つサイトを紹介してくれるサイトをご紹介。 このサイト、まったく自分の興味