ウインドウサイズによって指定した数値の整数倍にwidthを調整する

straightline bookmarkというサイトを見ていて、div#wrapperがウインドウサイズに追随して変わるのですが320px、640px、960px・・・と320の整数倍で変わっていることに気付きました。

div#wrapper内の要素が固定幅ならきれいにレイアウトできる仕組みだと思い、自分でもスクリプトを書いてみました。

DEMO

AD

Javascript

あとはdiv#contentsに対してmargin: 0 auto;を指定しておけば、ウィンドウサイズに応じてwidthが可変でかつ中央揃えとなります。jQuery Masonryプラグインと組み合わせて使うと面白いかもしれません。

単純な計算だけなので大したコードでもないですが、可変グリッドやレスポンシブデザインでも使えるテクニックかもしれません。

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

コメントはまだありません。