凡例とは？ 主題図やチャートには欠かせない凡例ですが、D3.jsではこの判例も自動的に生成はしてくれないので自分で描画する必要があります。 以外とメンドウな作業なのですが、「d3 Legend」プラグインを使うとd3.scaleの設定から凡例を簡単に生成することができます。 非常に便利なプラグインなので是非つかってみてください。 サンプル オーソドックスな縦書きの凡例を表示してみました。 var svg = d3.select('svg'); //チャートを描画する際に使用するスケール(正規化)関数 var colorScale = d3.scale.linear() .domain([0, 100]).range(["skyblue", "darkblue"]); //凡例を配置するグループ要素を追加 var legendView = svg.append("g") .attr("cla

「OOCSS (Object Oriented CSS) の Spacing クラス のようなもの」というのは、よくあるこういったやつです: /* p,m = padding,margin a,t,r,b,l,h,v = all,top,right,bottom,left,horizontal,vertical */ .pt0, .pv0, .pa0 { padding-top: 0px !important; } .pr0, .ph0, .pa0 { padding-right: 0px !important; } .pb0, .pv0, .pa0 { padding-bottom: 0px !important; } .pl0, .ph0, .pa0 { padding-left: 0px !important; } .pt10, .pv10, .pa10 { padding-top:

横幅やマージンなどを % で指定したい場合、親ボックスの横幅などから % の値を計算する必要があります。複数の値を % 値で指定するとなると計算がめんどくさく、また計算ミスの可能性も出てきます。そこで、Sass の mixin 機能を使えば簡単に変換することができて便利かなと思い px 値を % に変換して指定する mixin を考えてみました。

Sass ファイルのディレクトリ構造や管理手法について、まとめてみました 目次 有名サービスのディレクトリ構造いろいろ Sass ファイルを美しく保つためのコツ Sass ディレクトリのおすすめ構成方法 有名サービスのディレクトリ構造いろいろ 有名なサービスがどうやって Sass プロジェクトを構築しているのか気になったので、調べてみました。 ・Compass ・Breakpoint ・Octopress ・Sass Twitter Bootstrap ・Gumby Compass (2015/06/18 現在) compass/core/stylesheets compass/ | |— css3/ | |— _animation.scss | |— _appearance.scss | |— _background-clip.scss | |— _background-origin.s

フロントエンドのお仕事として、HTMLやCSS、JavaScript のコーディング回りを行っていると、以前に比べてやらなければならないことが増えてきていました。そのため、細々した作業でも、自動化して効率よく開発をすすめないと、時間がかかってしまうことが多いです。 そんなときに活用できるのが、今回使い方を紹介する gulp です。 gulp.js このエントリーでは、gulp が使えるように、gulp とはどういうものなのかの簡単な説明から、導入の基礎部分までを書いておきます。コピペでしか使ったことがない！という人や、誰かのコピペに頼って使っていたような人も、今後の活用していくための参考に利用してもらえたら嬉しいです。 gulp とは？ gulp.js は Node.js 製の毎回行うような作業を自動化してくれるツールです。よく様々なサイトでタスクランナーとして紹介されていますが、正確には

職種や技術の垣根を越えてWebに関わるすべての人を結ぶクリエイティブコミュニティ デザイナー、エンジニア、ディレクターなどあらゆる立場の方に参加していただき、その知の共有、研鑽ならびに参加者同士の交流を目的とした勉強会を定期的に開催しています。

プリンと焼き菓子のテイクアウトショップ。季節で入れ替わる9種のプリンとギフトにも最適な焼き菓子を多数ご用意しています。贈っても贈られても嬉しくなるようなお菓子を作っています

前回は「Material Designの基本的な考え方」について説明しましたが、今回はアプリを開発する際に「どうMaterial Designを活用すべきか」について解説します。 アプリの開発フローは企業によって異なりますが、以下のような流れが一般的かと思います。 もちろんチーム単位の開発は順番通り、かつ1回で終了できないでしょう。例えば、4番以降のデザインの詳細を詰める段階で、2番の画面レイアウトの見直しを迫られるケースも存在するわけです。開発プロセスに用いる「DesignSprint」は第3回以降に改めて解説しますが、今回はアプリ開発の最初のステップに相当する1番～4番について解説します。 アプリの構成で意識すべき3つのポイント 上の画像のようなアプリを開発する場合、いきなり「デザインする」のではなく、下記の3つのポイントを意識してアプリの構成を検討することが重要です。 適切なマージン

ディレクターやトコトコやってきて「あの案件どう？デザインカンプいま見れる？」この言葉でデータをスッと開ける人ですか？「えっと、あと30分待ってもらっていいですか・・・？」と絞り出す人ですか？今回はそんな人のための記事です。 わたしの思う理由 わたしはディレクターに指示をもらってデザインカンプ作成することが多いですが、最近では制作過程を見せることに抵抗を感じることなく、逆にメリットがあると感じています。むかし苦手だった頃を思い出して、原因を考えたことをTwitterにアップしました。 RTや♡の数を見ると、同じように「デザインの制作途中を見せるのが苦手」という方は、一定数いるようです。わたしの考えた苦手の原因は次の3つです。 「何を共有すべきか」が共有されていない 「ダサい、イケてない」デザイン批判への恐れ スケジュールに組み込まれていない しかし、早い段階でデザインを共有していくのは様々な

【神楽坂】大人も子供もHAPPY♪プリンの専門店「ACHO(アチョ）」神楽坂の住宅街の中にある青いドアが目印の小さなお店。そこはみんながHAPPYになれるプリンの専門店「ACHO」。こだわりの材料を使い、なめらかで濃厚なプリンは子供だけなく大人にもおすすめしたいとっておきのプリンです。さらに、洋酒を使った大人のデザートにピッタリのプリンや、プリンと同じくらいこだわりが詰まった焼き菓子も人気。経営されているご夫婦の優しい人柄が伝わるような、とっても素敵なお店をご紹介します。2017年03月28日作成

この度の「令和6年能登半島地震」により、被害を受けられた皆様に、心よりお見舞い申し上げます。 一日も早い復旧を心よりお祈りいたします。 ＜弊社オーナー様へのご案内＞

作成：2017/04/3 更新：2017/04/16 Tool > 開発環境 以前、ATOMの基本操作をAtomひと通りの使い方（Windows・Mac編）に書きましたが、今回はATOMおすすめのパッケージを追記。メジャーなパッケージは除外してます。 エンジニア速報は Twitter の@commteで配信しています。 マークダウンのアウトラインを自動生成 マークダウンのヘディング(h2/h3など)を読み取って、アウトラインを右側に表示してくれるパッケージ。表示されたインディックスはリンクになっていてクリックで移動できます。 document-outline マウスカーソルを垂直移動させる カーソルを垂直移動させる地味に便利なパッケージ。文章に半角と全角が入っていても綺麗に上下移動します。マークダウンなどで文章を作成する時に。 Atom のカーソル上下移動を改良するパッケージを作った -

いつの日かあなたの部下は、あなたというリーダーに付いていき、話を聞き入れ、あなたが成しとげたいことに対し、やる気を出す時が来るかもしれません。 リーダーシップを先天的に発揮する人は稀にいます。でもそうでない99％の人々はリーダーシップを獲得するために懸命になる必要があります。 長期的に成長していくチームを創り上げることは、どのリーダーにとってもっとも難しい課題のひとつです。 The Guide to UX Leadershipで説明したように、ビジネスで第一にやらなければならないのは、ビジネスの要素を理解し、将来を予測することです。 １. チームの将来の見通しを立てる チームと、業務量と、ほかの組織がどう変化するかの予測とを描くために大きな目標に集中する時間を設けましょう。 チームで協力して、業務量と組織構造の面からビジョンが実現可能であるか確かめましょう。未来は絶対に予知できないと心に留