Cntlog > スキルアップ・ノウハウ > コーディング > 10分で作れるレスポンシブ(サンプル有)

10分で作れるレスポンシブ(サンプル有)

レプポンシブデザインが当たり前とされてきた昨今、意外にもまだレスポンシブで作った事のないWEBデザイナはたくさんいます。
オーバーテクノロジーのように難しく考える方が多い印象がありますが、ただ実装するなら10分もあれば使えます。

まずはレスポンシブを知る。

レスポンシブは端末によってレイアウトが変わっている印象がありますが、その多くは実はウインドウの幅で制限しています。
CSS3から実装されたmediaqueryというもので、ウインドウ幅によって読み込むCSSを設定出来たりします。
これを活かして、横幅は画像の大きさを変更してレスポンシブデザインというのはできています。

書き方例

@media (max-width: 980px(←の数字がいわゆるブレイクポイント)) {
//ここにCSSを書くと設定したウインドウサイズの時だけ適応されます。
}

速攻でレスポンシブ対応のサイトを作る方法

レスポンシブサイトを設計を0から考えると大変なので、すでに設計されたものを使えば良いです。
自分の考えに合うものを作るのも大事ですが、自分の考えを別の設計に合わせる柔軟さも時として重要です。
mediaqueryがはじめから設計されています。

というわけで、お手軽にレスポンシブデザインを作りたいときはフレームワークを使います
今回使うフレームワークはbootstrapを使います。

bootstrapを使う理由
・有名どころなので情報が多い。
・使った事がある人多いので、ノウハウを共有しやすく触りやすい。
・CDNも用意されているので、わざわざダウンロードしなくてもはじめられる。
・私が好き。

bootstrapのスターターキットを用意していますので興味のある人はこちらを使ってみてください。
bootstrap_starter

bootstrapにおける、レスポンシブの設計ではグリッドデザインを使います。
基本的な使い方は.col-△-○を使って12分割されたブロックでレイアウトします。
※○の中には数字、△にはデバイス用の prefixが入ります。
このブロックはウインドウ幅によっていつカラム落ちするか決めることができます。
グリッドについて

あとカラム落ちだけじゃなくて、ウインドウ幅によって消えるコンテンツもclassで選択できます。

どんな感じかわかるようにサンプルを作りました。
これ10分で作っています。

サンプル

最後に

別にレスポンシブできることは凄くなくて、ちゃんとレスポンシブを使ってデザインをしっかりできる人が真のレスポンシブデザイナーだと思うのです。
軽々しくレスポンシブデザンできるとか言ってると、経験者から鼻で笑われてるかもしれしれません。

関連記事

コーディングのお供に!CSSの更新を自動で反映させてくれる便利なブックマークレート... 最近コーディングで便利なブックマークレートを見つけましたのでご紹介します。 CSSrefresh このブックマークレートは表示しているページで使われているCSSファイルの更新を自動的に確認してブラウザに反映させてくれるというものです。 コーデ...
Bootstapのグリッドでcolumn崩れが起きるときの対処法... Bootstrap3でグリッドを使っているとしばしば、カラム落ちしてレイアウト崩れをおこしている状態を見かけます。 今回はその対処方を紹介します。 対処方法 Flexboxを使う gridの.rowにFlexboxを当てれば解決します。 CSS ....
今更だけどretina対応を考えてみた そろそろiPadminiのretina対応が発表されて意識の高い気分の人たちが、「うむ、やはり時代はretinaだな」とか言うんじゃないかと睨んでます。 PC版であまりretinaディスプレイを意識して作った事はないのですが、スマホは別ですね。 まだまだ通信量を下...
コーディングが苦手な初心者Webデザイナーに上達するCSSの勉強法... Webデザイナーになろうとして、まず最初につまずくのがコーディングです。 CSSは慣れてくると簡単なのですが初めて触るとなると、何から手を付けてよいかわからない、何が正解がわからないなどの理由で挫折する人を多く見かけます。 本記事ではCSSが全然わからない方がCSSのコーディングに慣れるため...
【サンプル有り】文字詰めが出来るCSS「font-feature-settings」を試してみた... TwitterでとてもCSSで文字詰めができるという興味深いCSSの記事があったので、自分でも気になったのでサンプルを作ってみました。 そのCSSは「font-feature-settings」というものです。 詳しい事は下記記事よりご確認ください。 文字詰めできるCSSのfont-f...
コーディング規約(HTML・CSS)を作ってみた(公開済)... WEB制作に関わって4年位経ちましたが、最近自分のコーディングルールがバラバラで無駄が多いなと思ってきたので自分用にコーディング規約をまとめてみました。 作って見た規約はこちら。 WEB制作ガイドライン コーディング規約を作った理由 オレオレフレームワークやWordPres...