monolithic kernel

Twitter Bootstrap始めました

April 08, 2012

    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;
      }
    }