« Kinect巨乳 WORLD CUP 2012で戦ってきた | Main | Arduinoで噴水をコントロールする »

2012.07.01

例のトイレサイトでTwitter Bootstrapを使いまくった話

デザインにめっぽう弱い僕は、Twitter Bootstrapなしでは生きていけないぐらい頼りっぱなしなんだが、それなりの頼りっぷりだと自覚してるので、今の時点での感想や雑テクなどを書くことにする。

ちなみに前にもTwitter Bootstrapについて書いたことがあったが、そのときの見出しはこんな感じだった。
・あのサービスのようなボタンを作れる
・フォーム全般も見栄えが改善
・Webとモバイルでひとつのデザインに

今回は、こんな内容について書く。
・レスポンシブ・デザインは「郷に入れば郷に従え」
・navbar、Thumbnailsなど全てグリッド・レイアウトの恩恵を被る
・JavaScript Pluginsを恐れずに使おう

レスポンシブ・デザインは「郷に入れば郷に従え」

Webサイトを1つ作り、PCで表示したら2段組み、スマートフォンで表示したら1段組みにレスポンシブにレイアウトを変更できるサイトが流行っていて、Twitter Bootstrapもサポートしている。

作る画面は1つだけ、という意味で楽そうに聞こえるが、実際にレスポンシブ・デザインを導入してる人の話を聞くと、想定した通りの表示になっているかの確認が大変で、端末ごとに別々にデザインしたほうが、よっぽど楽だという人もいる。僕も最初はTwitter Bootstrapをベースにカスタマイズしようとして、なかなか意図したとおりにならなくて苦労した。

結論は、提供されているCSSを、そのまま使うことに尽きると思う。提供されているCSSを使っている範囲内では、数々の端末(PC、タブレット、スマートフォン)での動作が確認済みだというのは大きい。

navbar、Thumbnailsなど全てグリッド・レイアウトの恩恵を被る

グリッド・レイアウトで「郷に入れば郷に従え」と割り切れれば、他の、グリッドレイアウトに依存しているパーツの使い勝手も増す。navbarは、これぞTwitter Bootstrapというレイアウトなので、最初は使うのをためらったが、画面が広ければ通常のメニューバー、狭ければアコーディオン式に切り替わるのが素晴らしい。つまり、スマートフォンでも全機能を前面に出せるわけだ。(これを知らなかったので、最初はスマフォは機能限定にしてた)

Thumbnailは、画面サイズをグリッドレイアウトに合わせて自動調整するパーツ。割と最初の頃から存在してたが、地図のサイズも画面サイズに追随させられることを知ってから、いろんなところで活用するようになった。

JavaScript Pluginsを恐れずに使おう

JavaScriptは面倒そうだな、と敬遠してたが、上述のnavbarで、狭い画面でアコーディオン式にしたり、ドロップダウンメニューにするために組み込んでみたら、拍子抜けするほど簡単だったので、必要以上に多用して遊んでいる。

http://twitter.github.com/bootstrap/javascript.html

おすすめはModal。これを実現するJavaScriptは多数あるが、そこまでして使いたいものではなかった。今回、Twitter Bootstrapの一機能だということで使ってみたが、ソースもスッキリしたままなので開発意欲が長続きしそう。

|

« Kinect巨乳 WORLD CUP 2012で戦ってきた | Main | Arduinoで噴水をコントロールする »