経緯 会社の合宿で、何をつくろうかと考えたときに、最近、音楽ばっかりやってるから音楽系のツールを作ろうと思った。 コード進行のパターンの辞書を増やしていってるタイミングだったので、ベースのコード進行を作って、リハーモナイズ(メロディーはそのままにコード進行だけをアレンジしていくこと)をできるようにしたかった。 使ったもの CoffeeScript jQuery オワコンとはわかりつつ、今回は判定の... 続きを読む

経緯 display: inline-block;を指定するとあたかもinlineでの表示のように振る舞いながら、heightや上下のpaddingを指定することができてすごく便利です。 4列のデータ一覧を作りたいとき、これを使うとレイアウトが崩れてしまったので、そのメモ書き。 原因 HTML/CSSは以下のようなもの。 <ul class="column-list"> <li&... 続きを読む

経緯 グリッドデザインを使う上で、paddingやborderの幅がwidthやheightに含まれているとそこまで計算した上でmarginやwidthを決定しないといけないので、結構面倒くさいです。 そういうときに box-sizing: border-box; と指定しておくと、widthとheightにpaddingやborderの幅が含まれるようになります。 自分がコーディングするとき、基... 続きを読む

Gruntはフロントエンド開発において、CoffeeScriptやSassなどを使うときに、コンパイルを自動化してくれるツールです。 gruntコマンドのインストール Grunt.jsはnode.jsで動くツールです。もし、node.jsがインストールされていなければ、brewなどを使って brew install node としてインストールしておきましょう。 node -v としてバージョンが... 続きを読む