レスポンシブデザイン簡単すぎワロタwww

なにこれ、めっちゃ簡単じゃん。

今まで Twitter Bootstrap のテンプレートに頼り切っていたけど、そんなもん使わないで自分で一から作ったほうがよっぽど楽に作りたいもの作れるわ。

前回紹介した Kobo Search をレスポンシブ化したので、まとめておく。おそらく書いてあることは超基本。でもこれさえおさえれば普通にいいものは作れる。

モバイルファースト！

これめっちゃ大事。スマホのデザインをまず作る。 px 固定でも何でもいいからとりあえず作りたいものをまずそれで作る。

Chrome なら Window Resizer 入れて、ウィンドウサイズを320px にして開発する。

ちなみに横幅にスクロールさせないようにするには、全体を囲っている div タグに overflow: hidden; を加えればおk。 (参考：http://d.hatena.ne.jp/izit_kosuke/20110126/1296067112)

次はタブレット端末。これとPCは同じでいいっていうならそれでもいいけど、せっかくなら対応したほうがいい。

@media screen and (min-width: 768px) {
  // ここに既存のCSSを上書きするCSSを書く
}

これだけ。だから floatとかwidth とかみんなそれに合うように上書きすればいいだけ。基本的には元のCSSは書き直さなくても大体はいけるけど、px で一部%にしたほうがいいのは%に直すくらいはやるかも。

ここまで来たらもうすぐ。

@media screen and (min-width: 1024px) {
  // ここに既存のCSSを上書きするCSSを書く
}

これだけ。

これら複数のレイアウトをうまく適用するために前もってレイアウトの設計はしっかりとしておいたほうがいい。てことで Twitter Bootstrap の必要性があまり感じられなくなった今日この頃。