レスポンシブWebデザインレスポンシブWebデザインの基本レスポンシブWebデザインとは、1つのHTMLファイルでPCやスマートフォン、タブレットといった、あらゆるデバイスに最適化し、実現させる制作手法のことを言います。ブラウザのスクリーンサイズを基準に、CSSを使ってレイアウトを調整していくので、新しいデバイスなどが出てもHTMLを修正する必要もなく、デバイスごとにサイトを作成するよりもメンテナンスの負担も軽減することができます。ここでは、レスポンシブWebデザインの基本的な作り方を紹介していきます。レスポンシブWebデザイン制作の流れ通常、Webサイトを制作する際は、Photoshopなどを使用してデザインカンプを作成し、決定したデザインに従ってHTMLやCSSでコーディングしていくという流れが基本だと思います。レスポンシブWebデザインでWebサイトを制作する際も、もちろんデザインカンプを用意しても構わないのですが、各デバイスごとにカンプを用意するとなると結構な時間と手間を費やしてしまうこともあります。それなので、レスポンシブWebデザインの場合は、ラフスケッチを用意するかイメージが付きにくい場合は、1つだけ基本となるカンプを用意して、あとはブラウザ上で直接HTMLやCSSを使用してデザインしていく方法をとることもあります。ちなみにこのような手法をデザイニングブラウザと呼ばれたりします。レスポンシブWebデザインで使う技術レスポンシブWebデザインを利用してサイトを制作していく場合に必要となってくる技術は概ね以下のようなものが挙げられます。Image)HTMLの準備HTMLは特別な事情がない限り、HTML5を使用してコーディングしていけば良いと思います。Viewportの指定スマートフォンに搭載されているブラウザには「Viewport」というウインドウサイズが設定されているので、設定されたViewportのサイズの応じてページを縮小して表示しています。実際にViewportを指定するには、以下のようにhead要素内に指定します。content="width=device-width,initial-scale=1.0">「width=device-width」と指定しているのは、Viewportの幅をデバイスのスクリーンサイズに合わせるという意味になります。「width=320px」といったように数値で直接指定することもできますが、「device-width」としたほうが、様々なデバイスに対応することができます。その他にも、以下のようなプロパティが用意されています。最大の拡大率を指定する(0~10.0の範囲)CSSの記述レスポンシブWebデザインでは、メディアクエリーというものを使ってデバイスのスクリーンサイズに応じてCSSを切り替えていきます。実際にCSSをスクリーンサイズごとに切り替えるには、ブレイクポイントというものを決めて、それぞれに合ったCSSを記述していきます。基本的には、どのようなデバイスにも依存しないようにするのが一番ですが、一般的に多くのユーザーが使うであろうサイズは以下のような感じです。1024pxどこをブレイクポイントにするかは制作するサイトの内容に応じて決定すれば良いでしょう。メディアクエリーの使い方メディアクエリーを使う方法は、HTMLのlink要素にメディアタイプを指定する方法と@mediaを利用してCSS内に記述する方法がありますが、link要素で複数のCSSファイルを読み込むよりも@mediaを利用したほうが、HTTPリクエスト回数も少なく、読み込みも早いので@mediaを利用するほうが良いでしょう。以下は、ブレイクポイントを480px、768px、1024pxに設定した場合のCSSの記述例となります。{/*最小幅1024px以上のスクリーンサイズにかかるスタイルを記述*/}また、例えば768px~999pxの間で適応させたい場合や767px以下のサイズに適応させたい場合は、以下のように設定をします。{/*767px以下のスクリーンサイズにかかるスタイルを記述*/}また、PCサイトをコーディングしていく際と同じく、レスポンシブWebデザインの場合でもリセットCSSは使用したほうが良いでしょう。Libraryがあります。可変グリッド設計レスポンシブWebデザインを用いる場合は様々なデバイスを対象として設計していきますので、そのウィンドウサイズに合わせてコンテンツの幅が可変していくように作る必要があります。したがって、PCサイトを作るときのようにpx単位では作らず、%など相対的な値で設計していきます。可変イメージもレスポンシブWebデザインにする場合には必要になってくる技術で、これはウィンドウ幅に合わせて画像サイズが変わっていく手法です。以下のように指定すると可変イメージにすることができます。100%;}以上が、レスポンシブWebデザインで作成する際の基本的なポイントとなります。