conti レプポンシブデザインが当たり前とされてきた昨今、意外にもまだレスポンシブで作った事のないWEBデザイナはたくさんいます。
オーバーテクノロジーのように難しく考える方が多い印象がありますが、ただ実装するなら10分もあれば使えます。
まずはレスポンシブを知る。
レスポンシブは端末によってレイアウトが変わっている印象がありますが、その多くは実はウインドウの幅で制限しています。
CSS3から実装されたmediaqueryというもので、ウインドウ幅によって読み込むCSSを設定出来たりします。
これを活かして、横幅は画像の大きさを変更してレスポンシブデザインというのはできています。
書き方例
@media (max-width: 980px（←の数字がいわゆるブレイクポイント）) {
//ここにCSSを書くと設定したウインドウサイズの時だけ適応されます。
}
速攻でレスポンシブ対応のサイトを作る方法
レスポンシブサイトを設計を0から考えると大変なので、すでに設計されたものを使えば良いです。
自分の考えに合うものを作るのも大事ですが、自分の考えを別の設計に合わせる柔軟さも時として重要です。
mediaqueryがはじめから設計されています。
というわけで、お手軽にレスポンシブデザインを作りたいときはフレームワークを使います。
今回使うフレームワークはbootstrapを使います。
- bootstrapを使う理由
- ・有名どころなので情報が多い。
- ・使った事がある人多いので、ノウハウを共有しやすく触りやすい。
- ・CDNも用意されているので、わざわざダウンロードしなくてもはじめられる。
- ・私が好き。
bootstrapのスターターキットを用意していますので興味のある人はこちらを使ってみてください。
bootstrap_starter
bootstrapにおける、レスポンシブの設計ではグリッドデザインを使います。
基本的な使い方は.col-△-○を使って12分割されたブロックでレイアウトします。
※○の中には数字、△にはデバイス用の prefixが入ります。
このブロックはウインドウ幅によっていつカラム落ちするか決めることができます。
グリッドについて
あとカラム落ちだけじゃなくて、ウインドウ幅によって消えるコンテンツもclassで選択できます。
どんな感じかわかるようにサンプルを作りました。
これ10分で作っています。
最後に
別にレスポンシブできることは凄くなくて、ちゃんとレスポンシブを使ってデザインをしっかりできる人が真のレスポンシブデザイナーだと思うのです。
軽々しくレスポンシブデザンできるとか言ってると、経験者から鼻で笑われてるかもしれしれません。
