レスポンシブWebデザインとは

レスポンシブWebデザインが使われる場面

現在のフロントエンド開発においては、デスクトップブラウザだけでなく、

スマートフォン等のモバイルブラウザへの対応も必要となっています。

他にもタブレットや、ゲーム用のデバイス等の専用ブラウザを対象とすることもありますよね。

単純にデバイスごとでディスプレイのサイズや仕様も異なりますから、ケースによって想定していた通り描画されていない！というのはよくある話です...。

じゃあどうするかとなったときに、単に対応する必要のあるデバイスごとに固有のビューページを用意すれば良いかと言えばそれは不可能な場合が多いです。

デバイスと一括りに行っても近年は多様化していて１つ１つに最適化することは時間的に難しいことが多いです。

じゃあどうするの？ってなったときにアプローチの１つとして使われるのがレスポンシブWebデザインとなるわけです。

具体的にレスポンシブWebデザインとは何

レスポンシブWebデザインは2010年ごろからあるスクリーンサイズを基準としたテクニックです。

レスポンシブの３つの要素

レスポンシブには以下の３つの要素があります。

メディアクエリ (Media Queries)
フルードグリッド (Fluid Grid)
フルードイメージ (Fluid Image)

Fluid（流動的）という言葉通り、テキストや画像、レイアウトをスクリーンサイズに対して動的に変化させることによって
サイズに対応したコンテンツの見せ方をさせることになります。

具体的にはメディアクエリを用いて、指定条件下でのスタイル、振る舞いを指定することが一般的ですね。

指定条件というのは、基本的にはスクリーンサイズの幅を指定することが多いです。
またこのスクリーンサイズの幅の線引きのことをブレークポイントといったりします。

以下例のコードです

Sample.css

/* ブレークポイントを900pxに指定（900pxより広い場合のスタイル） */

@media all and (min-width: 900px) {
  .column {
    width: 30%;
  }
}

このようにして組み合わせていくことで、レスポンシブに対応したWebサイトを作成していきます。

長くなりそうなのでpart1はこの辺りで切っておきます