レスポンシブ・ウェブデザインの作り方

Googleの公式サイト
で説明されているように、Media Queriesを使って条件分岐を記述し、モニターの横幅に応じて読み込むcssを変えて、画面の見え方を変化させます。

理屈は簡単です。

シンプルなデザインであればすぐに作成することが出来ます。

「モバイルファースト」という考え方で、まずスマホ用のレイアウトでcssを作成し、個別に必要なことを追加して、タブレット用とPC用を作成するという方法が推奨されていますが、PC版から先に作っても問題ありません。その際、タブレットやスマホで出来る限り同じ設定を使えるように作成するのがコツになります。

例えば、2カラムの場合、従来であれば、ピクセル単位で幅設定していたのを、％設定にしておけば、タブレットやスマホでも、同じcss設定が使えます。

どの幅でPC、スマホ、タブレット用のcssを使うかという指定を「ブレイクポイント」と呼びます。 これは自由に設定することが出来ますが、スマホやタブレットもどんどん 新しい機種が発売され、高性能になっていきますので、それに合わせて「ブレイクポイント」を決める必要があります。

制作時点での情勢を調べた上で決定してください。

「Media Queries」は、従来のCSSからあった「Media Type」の仕様を拡張し、数値で指定した画面サイズなどの細かな条件に応じて、読み込むスタイルシートを振り分けることが出来るCSS3の機能です。

CSS3は従来のCSS2に新しい機能が加わったものなので、古いファイルを書き換える必要はなく、そのまま追加することが出来ます。
ただ、まだ策定中の段階であり、仕様が確定しておらず、各ブラウザが先行して実装している状況です。

CSS3を使う際、特に問題となるのが、IE（InternetExplorer）での対応が遅れている点です。
レスポンシブ・ウェブデザインを実現するために最低限必要な「Media Queries」はIE9から実装されていますが、まだまだIE8以下のバージョンを使っている人は多いので、IE8以下では個別にCSSファイルを読み込むようにさせます。

CSS3で追加されたセレクタやプロパティが各ブラウザのどのバージョンから採用されているかは、常に注意しながらwebサイトを作成する必要があります。