お盆休みなんて特になかった、JETBABY管理人です。
ご無沙汰です。

最近レスポンシブなサイト制作をすることが重なっているので、ちょっと自分の中で再確認したいと思います。
今回から数回に分けて、レスポンシブサイトの制作についてまとめてみる予定。

ということで、レスポンシブ、レスポンシブウェブデザインとはどんなものや？というのを先ずはざっくり。

「HTMLはワンソースでCSSなどで画面幅によってレイアウトを最適化させる手法」

という感じでしょうか。

どんな種類があって、どんなメリットでメリットがあるのでしょうか。
簡単なサンプルを作ってみましたので、そちらをご覧くださいませ。

レスポンシブデザインの種類としては大きく分けて以下の5つがあります。

• Fluid Grid(Mostly fluid)
• Column Drop
• Layout Shifter
• Off Canvas
• Tiny Tweaks

サンプルは種類ごとにページを作ってあります。
各種類がどんなものなのかもサンプルに記載しておきましたので、どうぞ。

レスポンシブウェブデザインのサンプルデモ

サンプルの補足として・・・

なによりもあくまでサンプルですという、逃げを先に謳っておきます。

このデモではHTMLの構造はすべて同じでCSSだけ変えています。
本来はレイアウトごとにHTMLの構造も変化させるべきだとおもいます。
3カラムの横並びもCSSでtabll-cellとか使えばもっと簡単にできます。flexboxとかでも同じく簡単にできる場合もありますが、まだまだ環境に依存する部分が多いので面倒なので使っていません。

ブレイクポイントの調整は細かくしていないので、若干レイアウトが狂う幅がすうピクセル単位であると思います。jQueryで左右のカラムの高さをあわせたりしてる部分で特に。

基本的にPC、タブレット、スマホといった形で画面幅にあわせて3段階でレイアウトが変わります。

とはいえ、モバイル実機では確認していません。実機確認は結構大変なので。うちにはAndorid1.6、Andorid2.3、Andorid4.0が２機、Andorid4.2、iPhone4s(iOS6)、iPhone5s(iOS7)、iPad(iOS6)、Win8.1タブとありますが、まぁ、どれもこれもちょっとずつズレたりと・・・。

最後になんかサンプルのメリット・デメリットにネガティブなこと書いてるんですが、レスポンシブデザインが嫌いなわけではない。むしろ好きだ。
でも使う意味は考えないと火傷するぜ！ということが言いたかったということをお伝えします。