かれこれ５年くらい放っておいた弊社ホームページを全面的に刷新しました。作った当時は「これからはXHTMLだぜ、諸君！！」みたいな時期だったらしくて、中身をみているとちゃっかりXHTML1.0で書かれていましたが、ドッグイヤーな業界の定めで、今や猫も杓子も組み込み基盤ですらも「HTML5で行きましょうや」となってしまっています。ですので折よくBootstrap 3が正式リリースされた事もあって、ようやく重い腰を上げて刷新しました。

とは言っても過去の恥ずかしいコンテンツを丸ごと消し飛ばして、Bootstrapのテンプレートにちょっと手を加えて書き換えただけだったりするのですが、それでもなんとなく素敵な見栄えになるグリッドシステムが売りのBootstrapが大好きです。

ほんの触りだけですが実際にBootstrap 3を使ってみた感想ですが、グリッドシステムがより一層使いやすくなっています。

例えばBootstrap 2では

<div class="row-fluid">
  <div class="span6">
    <p>右半分です</p>
  </div>
  <div class="span6">
    <p>左半分です</p>
  </div>
</div>

上記のようにしか指定出来ませんでしたがBootstrap 3では

<div class="row">
  <div class="col-md-6 col-lg-3">
    <p>大きい画面の時は狭くなる</p>
  </div>
  <div class="col-md-6 col-lg-9">
    <p>大きい画面の時は広くなる</p>
  </div>
</div>

こんな感じでより細かく指定できます。

Fluid（流動性）レイアウトが標準になったこともあって、このように画面の大きさに合わせて割合を変化させることが出来るようになりました。その他にも画面の広さに応じて表示、非表示を決定するクラスも新たに追加されています。モバイルファーストフレームワークとうたい文句は伊達じゃないですね。