HAM MEDIA MEMO

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

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

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

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

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

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

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

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

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

Youtube の埋め込みをレスポンシブ対応のページにそのまま入れようとしても、可変になってくれないという問題がでてきます。

レスポンシブ対応する方法について、毎回調べてしまっていたので、メモとしてエントリーしておきます。

英数文字で構成されるブロックが長い場合、widthの指定をしていても折り返さずにつけ抜けてしまう。

このような英数文字が画面端で折り返さない時の対処法です。