viewport設定とメディアクエリによるレスポンシブデザイン

viewportを設定し，スマホやタブレットではタッチに最適化した要素が表示されるようにサイトを修正した．判定基準はユーザーエージェントにおけるデバイス情報ではなく「画面サイズが512px以下か否か」なので，PCでも横幅を狭くすると表示を試すことができる．デバイス情報を用いないことで，新デバイスが登場する度にきちんと表示されるか心配になる必要はない．viwport設定でwidth=device-widthと設定してあるので，大抵のスマホ端末では幅が512px以下に設定されるので，適切に誘導されるはずだ．NexusやKindleでは幅が500px以上あるので，PCサイトと同様の見た目になるはず．

もともとこのサイトはdiv要素やp要素にclassとidを大量に付与して，CSSで見た目を制御していた．そのため，スマホ用サイトを新たに立ち上げるよりは，CSSにメディアクエリを使って制御したほうが楽だ．主に弄ったのは

• !important 設定によるリンク要素の強制ボタン化
• floatを設定した要素の幅をそれぞれ100%にすることでサイドバーを下に移動
• 画面幅が狭い時はトップメニューをfloat化してボタン化することで押しやすく

といったところ．トップメニューは上下のボーダーを上書きした上で，#topMenu ul li で基本的な設定を施し，#topMenu ul li:nth-child(2n)で偶数番目のボタンに対してfloat:right;を設定してある．基礎的なことを組み合わせるだけでも，だいぶわかりやすいサイトは作れるとわかったので良かった．