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

経緯 Bowerを使ってるとbower_componentsの中にjsのファイルが入っていきますが、jsだけでなく、README.mdやbower.jsonなどの余計なファイルもたくさんあって、あまり見やすいとは言えません。それが嫌で毛嫌いされているような感じがするBowerですが、ちゃんとそのあたり解決する術は残されています。 こんなときこそ、GruntJSです。GruntJSの導入はここでは触... 続きを読む

経緯 フロントを構築するときに面倒くさいSassやCoffeeScriptのコンパイルやらなんやらを自動化できるツールのGrunt。 Gruntのすばらしさはこれだけにとどまらず、もっt様々なことを自動化することができます。 たとえば、地味に面倒くさいCSS変更後のブラウザの更新。デュアルディスプレイにして、片方の画面でブラウザを見ながら、もう一つでコーディングなんていうことをしていると、わざわざ... 続きを読む

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