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

サンプル

最後に

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

関連記事

今更だけど押さえておきたいHTML5のマークアップやAPIの基本的なところ... HTML5の言葉が流行りだして結構な時間が経ちましたが、何が使えて、何がまだ使いにくい状況なのかをずっと放置していましたのでマークアップ、API周りについて少しまとめてみました。 HTML5で追加された基本的なタグ 新しいタグの追加によって文章構造がより明確化できるようになり...
【サンプル有】日本語WebFont 一歩前進! Google Fonts 日本語早期アクセスのページ... Googleが提供しているWeb FontでとうとうGoogle Fontsの日本語早期アクセスのページが公開されましたね。 これまで日本語WebFontといえばNotoFontが有名でしたが今回の8つのフォントが追加されました。 簡単にですが公開されたフォントを紹介します。 ...
コーディングのお供に!CSSの更新を自動で反映させてくれる便利なブックマークレート... 最近コーディングで便利なブックマークレートを見つけましたのでご紹介します。 CSSrefresh このブックマークレートは表示しているページで使われているCSSファイルの更新を自動的に確認してブラウザに反映させてくれるというものです。 コーデ...
今更だけどretina対応を考えてみた そろそろiPadminiのretina対応が発表されて意識の高い気分の人たちが、「うむ、やはり時代はretinaだな」とか言うんじゃないかと睨んでます。 PC版であまりretinaディスプレイを意識して作った事はないのですが、スマホは別ですね。 まだまだ通信量を下...
【2017年】よく使うmetaタグとかをまとめてみた... Web制作を長いことやっていても、中々勉強する機会のないmetaタグやlinkタグでよく使うものを整理しました。 これまで必要な度にコピペしていた人、これからWebを勉強する人の参考になれば幸いです。 使いやすいようにスプレッドシートにもまとめています。 記事を読むのが煩わしいかた...
このフレームワークに惚れたらレスポンシブデザインについて色々考えちゃいました... 先日フレームワークのResponsive Grid Systemが大幅に変更されたと知って興味があって調べてみました。 Responsive Grid Systemとはグリッドシステムを使うためのフレームワークで、レスポンシブデザインでも使用できるような設計をされているものです。 確認し...