Search on the blog

2013年4月29日月曜日

ボタン風横並びリストの幅を調整する

VPSで借りてるサーバーのトップページのボタンがいまいちイケてなかったので微調整しました。

どうイケてなかったかというと、
iPhoneで見ると下のように表示されてました。


横並びボタンが2列になっています。
原因は、スタイルシートでwidth=250;と決め打ちしていたからで、幅が狭いウィンドウで見ると2列になってしまっていました。

jQueryをつかって、初期表示時とウィンドウのリサイズ時に、ウィンドウ幅を取得してボタンの幅と一番左のボタンの位置を動的に変えるようにしてみました。

具体的に言うと、
  • ボタンの幅 = ウィンドウ幅 / (ボタンの数 + 1)   
  • 左端ボタンの位置 = (ウィンドウ幅 - ボタンの幅 * ボタンの数) / 2
という処理を$(document).ready()と$window.resize()内で行うようにしました。

結果は、以下のとおり。ボタンが1列に並んでいます。
PCで見る場合もwindowのサイズに応じてボタンの配置を調整してくれるようになりました。



0 件のコメント:

コメントを投稿