レスポンシブウェブサイトの作り方

レスポンシブ、それは多種多様なデバイスの画面サイズに"柔軟に"サイトサイズを対応させる事。
PC用のサイトを基本に、スマホ・タブレット用の別サイトは作らず一つのサイトで全てのデバイスに対応させる。コストが低く済む。
細かい技はあるがレスポンシブにする基本的なコツとして二つ、

・width:100%
サイトの全体幅をpixel指定で固定化するのでなく、%の割合指定で相対的に幅が伸縮する様にする(pixelも%も指定しないと自動的100%にはなるが)。縦幅はコンテンツを詰め込んだ分自動的に伸びていくだけで良いのでhightで長さは指定しない。

・float
全体幅の中に入れるcssのfloat(回り込み)で出来たカラム(列)は、例えばパソコン用ならメインとサイドバーの２つ、スマホ用ならメインの下にサイドバーが一列となる様にする。
まず基本とするパソコン用は、全体幅(100%)の中にメイン70%サイドバー30%にする(細かいpaddingやらborderなどで発生する幅の分はその分を減らす様に調整して)。
スマホ・タブレット(縦画面)用は、メイン100%、サイドバー100%でメインの下にサイドバーとなる様に縦並びにする(htmlコードの書き順もseo的にもメイン→サイドバーとはなる)。
その時CSSにメインとサイドバーのcssをもう一つ書き加える。

/*メイン*/
article {
　　width: 70%;
　}

@media only screen and (max-width: 667px) {
　article {
　　　width: 100%;
　}
}

/*サイドバー*/
section {
width: 30%;
　}

@media only screen and (max-width: 667px) {
　section {
　　width: 100%;
　}
}

と指定する。
(通常のarticle sectionの下に@media only screen and (サイズ指定)のをもう一つ指定する。article sectionの部分は対応するタグに書き換える)
max-width: 667px は全体幅がタブレット(ipad miniを想定)の縦画面の時の横幅以下になった時100%に広がると指定している。