しゅん | ディレクター・デザイナー

販促物・広報物メイン。企画構成コピーからプログラミングや動画までひと通り自力でもやって…

しゅん | ディレクター・デザイナー

販促物・広報物メイン。企画構成コピーからプログラミングや動画までひと通り自力でもやってます。Web・印刷両方で長年活動中。クリエイターのための作業自動化についてツール自作したりサービス漁ったりして研究してます。

好きな画像でラクにグラフ化するJS

前の記事で「できるだけラクにグラフ化するJS」なるものを公開しましたが、基本の仕組みを流用してもうひとつJavaScriptを作ってみました。 グラフの棒部分に好きな画像を好きなカラーで使うことができます。 ※本記事サンプル内のアイコンはFont Awesomeのフリーアイコンを使っています。 こんなHTMLがあるとして… <dl class="my-chart2"> <dt>50代以上</dt> <dd>56%</dd> <dt>40代</dt>

しゅん | ディレクタ…

    • できるだけラクにグラフ化するJS ver.2

      先日公開した「できるだけラクにグラフ化するJS」の第2弾がほぼ完成間近になったころ、ふとあることが頭をよぎりました。 「カラーはCSSで変えられるようにした方が良いのでは…？」 つまり、 functionの引数でしか指定できない 　→独自仕様なので使い方を把握しないといけない CSSで指定できる 　→どのプロパティに設定するか把握できれば使える と思ったわけです。 見た目に関する部分はなるべくCSSで変えるのが筋という気もしますし。 そこで第2弾をCSS指定方式

      しゅん | ディレクタ…

      • できるだけラクにグラフ化するJS

        これは先日、仕事の合間に衝動に駆られて勢いで作ったJavaScriptなんですが、実用を想定した仕様にするというお題を自分に課して組み直したものです。 デザイナーにとって扱いやすいツールをカタチにしていきたいと常々思っていたこともあり、せっかくなのでご紹介してみることにしました。 こんなHTMLがあるとして… <dl class="my-chart1"> <dt>アップルパイ</dt> <dd>67%</dd> <dt>エクレア</dt> <dd>

        しゅん | ディレクタ…

      好きな画像でラクにグラフ化するJS

      しゅん | ディレクター・デザイナー