Twitter Bootstrapを使い始めました。

というのも、幅広い環境でまともに表示できるサイトを個人で作るのは、主にIE的な意味で難しいと感じるからです。IE9はそれなりにまともな挙動なのですが、残念ながら現時点ではIE8もかなり多く残っており、対応せざるを得ません。少なくともWindows XPのサポートが終了する2014年くらいまではIE8をサポートし続けなければならないでしょうが、これから先まだ2年以上IE8の相手をし続けなければならないと考えるだけで憂鬱になります。

で、実際に導入してみたのですが、とてもよいです。ここを見ながら適当に打ち込んでいくだけでTwitterっぽい素敵なサイトができあがります。しかもIEでも問題ない！

ただ、いくつか気になるところがあったので対処してみました。かっちり作り込まれたフレームワークなので、少しでもいじると破綻するんじゃ無いかと心配でしたが、少しくらいなら特に問題はなさそうです。まだバージョンアップを乗り越えてないので何とも言えませんが。

文字サイズ

アルファベットだと13pxでも問題なさそうですが、日本語には小さいと思います。ほんとは16pxくらいにしたいところですが、調整する箇所が増えてやっかいなことになりそうなので、本文のみ14pxにしてみました。

p {
  font-size: 14px;
  line-height: 22px;
}

スマートフォンでの左右のマージン

bootstrap-responsive.cssは微妙な部分はあるものの、簡単にスマートフォン対応を実現できて便利です。ただ、スマートフォンで表示したときの左右のマージンが広すぎるのはさすがにどうかと思ったので調整しました。

@media (max-width: 480px) {
  body {
    padding: 0 10px;
  }
  .navbar-fixed-top {
    margin: 0 -10px;
  }
}