レスポンシブルとは

PCやスマートフォンでは画面サイズがことなるため、それぞれに最適化したHTML、CSSを別々に用意してユーザエージェントの判定を行い、リダイレクトさせるといった面倒な手法が多いです。
ですがレスポンシブデザインは1つのHTML、CSSで画面サイズによってデザインを振り分けることが可能です。

ちなみに当サイトもレスポンシブルです。
ブラウザの種類によってでデザインが変わります。

レスポンシブル実装

レスポンシブルの実装方法

説明

以下がレスポンシブルに使用される属性と説明です。

属性	説明
Max Width	ブラウザの最大幅。このサイズより小さい場合に適用
Min Width	ブラウザの最小幅。このサイズより大きい場合に適用
Max Device Width	デバイスサイズの最大幅。このサイズより小さい場合に適用
Min Device Width	デバイスサイズの最小幅。このサイズより大きい場合に適用
Orientation	デバイスの向き

使用例

max-width

Sample1
ブラウザサイズが600px以下になった場合に赤くなります。

@media screen and (max-width:600px) {
    #sample1 {
        background-color: #FF0000;
    }
}

min-width

Sample2
ブラウザサイズが600px以上になった場合に赤くなります。

@media screen and (min-width:600px) {
    #sample2 {
        background-color: #FF0000;
    }
}

max-device-width

Sample3
デバイスサイズが320px以下になった場合に赤くなります。
※スマホなどの場合、画面を回転させた場合に変更される場合もあります。

@media only screen and (max-device-width : 320px){
    #sample3 {
        background-color: #FF0000;
    }
}

min-device-width

Sample4
デバイスサイズが320px以上になった場合に赤くなります。
※スマホなどの場合、画面を回転させた場合に変更される場合もあります。

@media only screen and (min-device-width : 320px){
    #sample4 {
        background-color: #FF0000;
    }
}

orientation : landscape

Sample5
デバイスが横向きの場合に赤くなります。
※ブラウザが縦長の時も同様

@media only screen and (orientation : landscape){
    #sample5 {
        background-color: #FF0000;
    }
}

orientation : portrait

Sample6
デバイスが縦向きの場合に赤くなります。
※ブラウザが縦長の時も同様

@media only screen and (orientation : portrait){
    #sample6 {
        background-color: #FF0000;
    }
}

複数の組み合わせ

Sample7
より高度な方法で複数のスタイルを組み合わせます。
「only」がなくなるので注意してください。
ブラウザサイズが600px以上、900px以下の場合赤くなります。

@media screen and (min-width: 600px) and (max-width: 900px) {
    #sample7 {
        background-color: #FF0000;
    }
}

ガラケーには対応できませんが、スマホとPC用のページを1つのWeb画面で複数のCSSを使用することによって実現出来ます。


PCの画面を録画してGIFアニメーションにする「GifCam」：次の記事»