レスポンシブデザインを作成してみよう

「簡単なWebページを作成してみよう」で作成した「レイアウト」と「3カラムレイアウト」をレスポンシブ対応にしてみましょう。
まずは画像を見て、自分で考えながら手を動かして作成してみて下さい。

ー レイアウト ー

・ウィンドウ幅が767pxまでの場合に適用
全体の横幅を80%にする

・ウィンドウ幅が479pxまでの場合に適用
ヘッダーの縦幅を300pxにする
フッターの縦幅を200pxにする

/*ウィンドウ幅が最大767pxまでの場合に適用(タブレット用)*/
@media screen and (max-width: 767px) {

    #wrapper {
        width: 80%;
    }

}


/*ウィンドウ幅が最大479pxまでの場合に適用(スマホ用)*/
@media screen and (max-width: 479px) {

    .header {
        height: 300px;
    }

    .footer {
        height: 200px;
    }

}

ー 3カラムレイアウト ー

・ウィンドウ幅が479pxまでの場合に適用
全体の横幅を400pxにする
leftの横幅を200pxに縦幅を500pxにする
left-upperの横幅を90pxに縦幅を60pxにする
left-lowerの横幅を90pxに縦幅320pxにする
centerの横幅を200pxにする
leftの下にcenterをもってくる
rightの横幅を200pxにする
right-innerの横幅を110pxにする
right-inner-textの文字の大きさを5pxにする
right-inner-textの内側の余白を10pxにする
right-inner-textの背景色をorangeに変える
right-inner-textの線の色をredに変える

/*ウィンドウ幅が最大479pxまでの場合に適用(タブレット用)*/
@media screen and (max-width: 479px) {

    .wrapper {
        width: 400px;
    }

    .left {
        width: 200px;
        height: 500px;
    }

    .left-upper {
        width: 90px;
        height: 60px;
    }

    .left-lower {
        width: 90px;
        height: 320px;
    }

    .center {
        float: none; /* 要素の浮動化の解除 */
        width: 200px;
    }

    .right {
        width: 50%;
    }

    .right-inner {
        width: 110px;
    }

    .right-inner-text {
        font-size: 5px;
        padding: 10px;
        background-color: orange;
        border: 5px solid red;
    }

}