レスポンシブデザインってなんぞや

現在、Webコンテンツにアクセス可能なハードウェアはPCやスマフォに加え、テレビやゲーム機など幅広く対応してきています。それに伴い、作る側もハードウェアの特性（画面の解像度やブラウザの癖）に対応させる必要が出てきました。
以前は、予めハードウェアごとに対応したページを作っておき、アクセス時に振り分けるなどといった方法が取られていましたが、ガラケやスマフォなどのモバイル端末の進化により、PC用のWebコンテンツの閲覧が可能となり、共通のHTMLをCSSのメディアクエリで制御し、デバイスに応じて最適化したレイアウトを表示させるという形「レスポンシブデザイン」という手法での制作が推奨されるようになりました。

レスポンシブで制作するメリットとしては以下が挙げられます。

• HTMLを共通化できる
• 同じHTMLなので検索エンジンに拾われやすい

レスポンシブのデメリット

デメリットとしては、共通のHTMLを使うため表示に多少の制限が生じるという点です。
多くのデバイスに対応させるというのは骨の折れる作業ですが、今後のメンテナンス性を考えれば多くの場合費用は抑えられるでしょう。

レスポンシブデザインで使われる技術

メディアクエリ

@mediaから始まる部分がメディアクエリです。

main {
  width: 75%
}
@media (max-width: 600px) {
  main {
    width:100%
  }
}

フルードイメージ

画面やレイアウトの幅に合わせてサイズが大小するイメージをフルードイメージといいます。
具体的にはmax-width:100%という指定を行うと親divのサイズに合わせてimgサイズが変化します。

<img src="https://blog-imgs-68.fc2.com/p/h/a/phantom37383/20140624133941.jpg" style="max-width:100%" alt="">

フルードグリッド

グリッドデザインを可変対応したものをフルートグリッドといいます。

フルードデザイン

ページをデバイスの横幅に合わせてサイズを相対値で調節するデザイン手法です。