inline-blockで横並びにしたとき、レイアウトが崩れてしまったときの話

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

border-box指定でjQueryを使うときのheightとwidthに注意

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

Grunt.jsでフロントエンド開発を自動化してみた

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

TAG LIST

AngularJS Arduino C++ CoffeeScript CSS FuelPHP Gem Grunt HTML5 Illustrator iPhoneアプリ JavaScript jQuery Midi MySQL Node.js OpenCV openFrameworks OpenGL osc Pd-extended PHP Processing Raspberry Pi Ruby Ruby on Rails WordPress イベント イラスト ゲーム フロントエンド ライフハック ライブ レポート 作曲 展示会 数論 日記 社会 考え事 自戒 記事紹介 資料 電子工作 音楽