Twitter Bootstrap の存在を思い出したので、せっかくなので自分の Web サイトのトップページを Twitter Bootstrap を使用したデザインに変更してみました。Bootstrap examples の構造をベースにして組んでいます。少し寂しい感じもしますが、まぁ追々考えていきます。
感想としては、ボタンや（今回は使用していないですが）フォーム等の各種パーツのデザインは使いやすくていいなと思いました。一方で、各種レイアウトの定義に関しては自分の要望を満たせず、PC 用 Web サイトを CSS のみでスマートフォンに対応する で使った方法で自分で定義する事にしました。
Twitter Bootstrap には、固定幅 (container, row) と可変幅 (container-fluid, row-fluid) が用意されているのですが、2 カラムの可変幅にすると両カラムが可変幅となってしまします。素直に実装するとそうなるので当たり前と言えば当たり前なのですが、ブログパーツ等の関係で「サイドバーの幅は固定にしたい」と言う要求はしばしば起こり、この関係でデフォルトの可変幅のスタイルはやや使いづらいと言う印象があります。そんな訳で、Twitter Bootstrap で 2 カラム以上のスタイルにする場合、固定幅を選択するか、カラムの幅の部分は自分で定義するのが良いかなと言う感想を抱きました。
後は、Twitter Bootstrap は全体的に左右の余白が広めに取られているので、そのままスマートフォンで表示させるとやや余白が多いかなと言う気がしました。今回の例では、表示の切り替えは bootstrap-responsive.css に任せず自分で弄っています。
上の方はゴチャゴチャしてるような印象もありますが、まずまず見られるような形になりました。
