カウンタ + グラフ

WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！

おさえておきたいところ

「カウンタ」「グラフ」を使う目的はこんな感じです。

　　　　　　　　　　　　目的：データを可視化して見せる
動きのきっかけ：画面の読み込み後 / スクロール

数字のカウントアップ・ダウン

See the Pen 数字のカウントアップ・ダウン by Web Navigator (@web-navigator) on CodePen.

棒グラフ（縦）

See the Pen 棒グラフ（縦） by Web Navigator (@web-navigator) on CodePen.

棒グラフ（横・複数バー）

See the Pen 棒グラフ（横・複数バー） by Web Navigator (@web-navigator) on CodePen.

折れ線グラフ（複数）

See the Pen 折れ線グラフ（複数） by Web Navigator (@web-navigator) on CodePen.

円グラフ

See the Pen 円グラフ by Web Navigator (@web-navigator) on CodePen.

円グラフ（ドーナッツ型）

See the Pen 円グラフ（ドーナッツ型） by Web Navigator (@web-navigator) on CodePen.

次回の予定

ユーザーの注意を引いたり入力させる
「モーダルウィンドウ」を作ってみようと思います＼＼\\٩( ‘ω’ )و //／／

合わせて読みたい

カウンタ + グラフ

WEBさん

WordPressの不具合をなおす人

XInstagramYouTubeContact

あなたのお仕事をする時間を使ってITに関することを調べたり、トライしてみたりして、それでもうまくいかない。そんなことはありませんか？ WEB先案内をご利用いただくと、困ったときにITの顧問としてあなたのITに関するお悩みにお答えし、サポートを行うことができます。