パソコン表示のみで考えられたサイトをスマートフォン対応にする

パソコン用に制作されたサイトを、スマートフォンやタブレットに対応させる技術のことをレスポンシブと呼びます。

このレスポンシブ対応のサイトにするには、まずは通常のhtmlがちゃんとできている事が必要です。ここは絶対的な基本となりますが、今回はその部分は割愛しますね。

まずはhead領域内に以下のコードを追加します。

<meta name="viewport" content="width=device-width; initial-scale=1.0" />

このコードにより、表示された端末の幅を正しく認識してくれるようになります。

そしてここからはCSSで対応します。
対応方法として先ほどの設定により、htmlで幅を取得するようになるので、その幅に対応するようにメディアクエリを使用し、CSSに以下の様に記述を追加します。追加する内容はPC用のスタイルに対し、タブレット・スマホ表示時に変更したい部分のみを上書きするように書きます。

@media screen and (max-width: 780px){/*780px以下（タブレット）の場合のスタイル*/
 #wrapper {
 width: 100%;
 }
}
@media screen and (max-width: 490px){/*490px以下（スマートフォン）の場合のスタイル*/
 #mainbox {
 float: none;
 width: 100%;
 }
}

この記述のmax-width:78opxと書いている部分がありますが、max-width→最大の幅と言うことで、最大でも780pxの場合、つまり、表示幅が780px以下であればタブレット用のスタイルを対応させて、さらに490px以下はスマートフォンだとしてそれぞれスタイルを定義します。
ここで気を付けるのは波かっこ｛｝←コレがネストするということ。

@media screen and (max-width: 780px){/*780px以下（タブレット）の場合のスタイル*/
　#wrapper {
　　width: 100%;
　}
}

上記のように文字色が紫色（メディアクエリ）の中に、緑色で表示させているスタイルを書きます。スタイルが複数ある場合（普通はいっぱいあります）にはメディアクエリ内に複数記述してください。
スタイルの内容としては、floatしているものをfloat:none;で解除させたり、パソコン用の幅に設定している値を、各表示サイズに適用できるようにpxから%に変更するとか。

参考記事