CSSのMedia Queriesを使ってはてダで異なる大きさのブラウザに対応する

どのようなブラウザでアクセスされてもきちんと表示されるように Web サイトを構築するのは当たり前ですが、ブラウザのスクリーンサイズにも気を使いたいところです。
JavaScript が使えるなら onresize イベントを使うこともできますが、はてなダイアリーでは許可されていないし、何より面倒。
なので、今回はMedia Queriesを使って(というか、こっち正攻法のはず)サイドバーの箱の位置を切り替えるようにしてみた。

スクリーンショット

こんなの見せなくても、PCからアクセスしてる人は実際にブラウザの大きさ変えると見れます。
Webkit、Firefox、Operaで動作確認しました。IEは環境が無くて確認していないので正しく表示されるか分からない。
画面サイズが大きいと、本文以外の箱がサイドバーに来くるし

小さいと下記のように、折りたたまれて本文の下に収まるようにしてみました。

CSS

Media Queriesについてはこことか参考になる。

• MediaQuery まとめ - IT戦記

僕の場合こんな感じの記述がある。

@media all and (min-width: 930px) {
  #infosection {
     margin-left: 700px;
  }

  #container {
    width: 920px;
  }
}

当然、実際のCSSは人それぞれですけど、画面サイズに依存しない部分と依存する部分を分けて書くだけなのでそんなに難しくなかったです。
これでまた一歩、01の世界からデザインの世界まで分かるエンジニアに近づいた、ような気がする。
自分の手で書いてみるのって大切ですね。