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分で作っています。

サンプル

最後に

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

関連記事

【サンプル有り】gulpで作るスタイルガイド-aigisに乗り換えました... これまでスタイルガイドジェネレーターはFrontnoteを使っていましたが、この度aigisに乗り換えました。 乗り換えた理由 以前からaigisの存在は知っていたのですが、私はFrontnoteを使っていました。 理由は単純で、Frontnoteだと導入が楽だったからです。 ス...
【2017年】よく使うmetaタグとかをまとめてみた... Web制作を長いことやっていても、中々勉強する機会のないmetaタグやlinkタグでよく使うものを整理しました。 これまで必要な度にコピペしていた人、これからWebを勉強する人の参考になれば幸いです。 使いやすいようにスプレッドシートにもまとめています。 記事を読むのが煩わしいかた...
Nuxt.jsのトラブル解決方法 今年からVue.jsを使い始めてノリノリだったのですが、最近Nuxt.jsも触り始めました。 Vue.jsがわかっていたら大丈夫かなーと思っていたのですが、結構Nuxt.jsの書き方でトラブったり悩んだりしたことがあったので、自分のあった経験と解決方法をご紹介します。 インストー...
コーディングが苦手な初心者Webデザイナーに上達するCSSの勉強法... Webデザイナーになろうとして、まず最初につまずくのがコーディングです。 CSSは慣れてくると簡単なのですが初めて触るとなると、何から手を付けてよいかわからない、何が正解がわからないなどの理由で挫折する人を多く見かけます。 本記事ではCSSが全然わからない方がCSSのコーディングに慣れるため...
Webデザイナーが効率よくHTMLコーディングができるPugのメリット... 2014年頃からPug(当時はjade)を使ってHTMLのコーディングを進めてました。 最初はこんな書き方もできたほうが良いのかなくらいで考えていたのですが、最近ではPugがないほうがしんどい状態になってきました。 保守が苦手だったり、修正時にミスが多い人はPugを使うことでコーディングの質...
【サンプル有り】文字詰めが出来るCSS「font-feature-settings」を試してみた... TwitterでとてもCSSで文字詰めができるという興味深いCSSの記事があったので、自分でも気になったのでサンプルを作ってみました。 そのCSSは「font-feature-settings」というものです。 詳しい事は下記記事よりご確認ください。 文字詰めできるCSSのfont-f...