2012-04-25

位置固定サイドバーはMedia Queriesと一緒に

デスクトップではブラウザーを最大化して使う人は減る傾向にある(気がする)。僕はそうで、ブラウザーはだいたい1280x800くらいのサイズにしている。多くのサイトでは問題ないんだけど、巨大なサイドバーをposition: fixedで固定しているWebサイトで下が切れるなどというケースが増えた。サイドバー固定自体は昔からあったが、最近はフォント・サイズが大きい(というかデフォルトを採用している)ことが増えたのでそれに比例してサイドバーが巨大になってしまっているのかなーと想像している。

例えばサイドバーの縦が832pxあるというのならMedia Queriesを使ってブラウザーに収まるなら位置固定、そうでないなら絶対配置にしてやるべき。

#sidebar {
  position: absolute;
}

@media screen and (min-height: 832px) {
  #sidebar {
    position: fixed;
  }
}

多くの場合、切れてしまう部分にあるのはソーシャル・ボタンとか©のアレとかなのでどうでも良いとも言えるんだけど、レスポンシブ・ウェブ・デザインというのはこういうところまでやって初めてレスポンシブと言えるのではないか。「モバイル・ファーストで書いて、min-width使ってiPadとデスクトップに対応しました！」はレスポンシブではない。