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

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

どうイケてなかったかというと、

iPhoneで見ると下のように表示されてました。

横並びボタンが２列になっています。

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

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

具体的に言うと、

• ボタンの幅 = ウィンドウ幅 / （ボタンの数 + 1）   
• 左端ボタンの位置 = (ウィンドウ幅 - ボタンの幅 * ボタンの数) / 2

という処理を$(document).ready()と$window.resize()内で行うようにしました。

結果は、以下のとおり。ボタンが１列に並んでいます。

PCで見る場合もwindowのサイズに応じてボタンの配置を調整してくれるようになりました。