CSS のTransition 終了時に JavaScript で処理を行う方法

CSS Nite in SAPPORO Vol.15「先どりWebトレンド2015」に登壇して』 で JavaScript との連携を書いたのですが、JavaScriptと合わせて使っていると、 Transition の終了時に合わせて処理を行うようなケースが時折でてきます。

Transition 終了時に JavaScript でイベントを拾えるので、今日はそれを使ったちょっとしたサンプルを紹介。

続きを読む

2カラムの片方を固定・可変にする方法

先日のエントリーで 『max-width がイメージと違う動きをする? width と max-width と float を理解する』 というのを書いたのですが、2カラムで片方が横幅固定、もう一方が可変幅で作りたい時には別の作りが必要と書いていたとおりに、もう少し工夫が必要となります。

今回は、そのカラムで片方を横幅固定、もう一方を可変幅にする方法を確認してみます。

続きを読む

max-width がイメージと違う動きをする? width と max-width と float を理解する

【CSS】max-widthについて調べて、floatとセットで使いたいけど使えない現状

某モズが CSS 勉強中とのことですが・・・

floatした要素にmax-widthを指定したときに
思った挙動と違うレンダリングになってしまいました。

そもそも max-width の部分よりも float の挙動を理解しきれていないのでは?と予想。

理解していない部分を確認して、どのようになるかを再確認してみましょう。

続きを読む