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「font-feature-settings」を試してみた... TwitterでとてもCSSで文字詰めができるという興味深いCSSの記事があったので、自分でも気になったのでサンプルを作ってみました。 そのCSSは「font-feature-settings」というものです。 詳しい事は下記記事よりご確認ください。 文字詰めできるCSSのfont-f...
Photoshopとかにある描画モードはCSS3で出来るよ【サンプル有り】... CSS3になって角丸はグラデーション、ドロップシャドウなどデザインツールを駆使して行っていたデザインがいとも簡単にできるようになりましたね。 実はCSS3ではphotoshopやFireworksにあるような、描画モード的な表示もできるようになっています。 ...
コーディング規約(HTML・CSS)を作ってみた(公開済)... WEB制作に関わって4年位経ちましたが、最近自分のコーディングルールがバラバラで無駄が多いなと思ってきたので自分用にコーディング規約をまとめてみました。 作って見た規約はこちら。 WEB制作ガイドライン コーディング規約を作った理由 オレオレフレームワークやWordPres...
【サンプル有】日本語WebFont 一歩前進! Google Fonts 日本語早期アクセスのページ... Googleが提供しているWeb FontでとうとうGoogle Fontsの日本語早期アクセスのページが公開されましたね。 これまで日本語WebFontといえばNotoFontが有名でしたが今回の8つのフォントが追加されました。 簡単にですが公開されたフォントを紹介します。 ...
WordPressじゃなくても、コピペでいけるソーシャルボタンの設置方法... 各種ソーシャルボタンってWordPressなら簡単に設置できるけど、自分で普通に設置しようと思うと初めてだとどうやって設置していいかわからないですよね。 そんな人向けに、よく見るデザインを簡単にSNSボタンの設置方法をご紹介します。 はじめに 各種ソーシャルボタンをまとめて簡単に設置できて...
今更だけど押さえておきたいHTML5のマークアップやAPIの基本的なところ... HTML5の言葉が流行りだして結構な時間が経ちましたが、何が使えて、何がまだ使いにくい状況なのかをずっと放置していましたのでマークアップ、API周りについて少しまとめてみました。 HTML5で追加された基本的なタグ 新しいタグの追加によって文章構造がより明確化できるようになり...