サイト制作「Lifestyle」（入門）編の最終レッスンです。今回のレッスンのボリュームは少し多くなります。

前回のレッスンまではPC用のデザインの構築を行ってきました。

今回はタブレット（TB）用とスマートフォン（SP）用のデザインを構築していきます。

よく目にする”レスポンシブ対応”とは世の中にある様々なデバイスに対応する。という意味です。

ですので、PCやタブレットスマホはもちろん、スマホなどを横にしたとときにもデザインは崩れないという状況にします。

こちらも難しく考える必要はありません。

今まで書いてきたCSSを上書きすることで対応します。

CSSは下に後に書いたCSSが上書きされて適応されます。下に書くほどに優先度が高くなります。

※その他にも優先順位のルールはありますが今回は後述したCSSの方が優先度が高いという考えだけで大丈夫です。

では行きましょう！

レスポンシブの書き方

まず簡単にレスポンシブの書き方を説明します。

HTMLにはコードを一行を書きます。

HTML

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

HTMLのコードはこちらです。このコードがないとレスポンシブのコードを打っても反応しません。

HTMLのheadタグの中に書いておきましょう。と言いたいところですが、このレッスンの一番最初に打ったエメットで実はこのコードは自動挿入されています。

もし、何かの間違いでこのコードがHTMLに打たれていない場合は打ち込んでください。大概の方は既に存在していると思います。

CSS

@media screen and (max-width: 930px) {
    /* デバイスのサイズが930px以下の場合のコードを書く */
    /* ※930pxの後ろに;（セミコロン）は付けません */
}

本題はCSSです。

@media screen and (max-width: 930px){} をの意味は930px以下のデバイスの場合｛から｝までのCSSを適用する。です。

また本レッスンとは逆にSP用のデザインから構築した場合は@media screen and (min-width: 930px){}

と書き、意味は930px以上のデバイスの場合{から}までのCSSを適応する。という意味になります。

max-width: ○○pxとmin-width: ○○pxの違いです。

@mediascreen and (max-width: 930px) {
    /* デバイスサイズが930px以下の場合のCSS */
}

@media screen and (min-width: 930px) {
    /* デバイスサイズが930px以上の場合のCSS */
}

本レッスンはPCからのデザインを行っていますのでmax-width: ○○pxを使用します。

ではまずタブレット用のCSSコードを載せます。

@media screen and (max-width: 930px) {
    section{
        padding: 0;
    }

    .container{
        padding: 0 24px;
    }

    header{
        flex-direction: column;  /* 解説します */
        margin: 30px 0 56px;
    }
   
    .logo{
        margin-bottom: 14px;
    }

    .nnavigation ul li {
        margin-right: 40px;
    }

    .first-view{
        margin-bottom: 60px;
    }

    .columns{
        flex-direction: column;　/* 解説します */
    }

    .column__block{
        width: 100%;　/* 解説します */
        max-width: 450px;  /* 解説します */
    }

    .text{
        max-width: 450px;
        margin-right: auto;
        margin-left: auto;
    }

    .order{
        margin-top: 126px;
    }

    .order .column__block:first-child{　/* 解説します */
        order: 2;
    }

    article{
        width: 35%;
        min-width: auto;
    }

    .column__block{
        margin-bottom: 28px;
    }

    .sub-ttl{
        margin-bottom: 7px;
    }
}

異常が全体のコードです。PCの検証ツールを使ってPCのウィンドウサイズを変更してみてください。

930pxになった瞬間にデザインが変わっているはずです。

以下、検証ツールを使ったウィンドウサイズの変更方法です。

検証ツールの開き方は

右クリック一番下の「検証」（検証ツール）をクリック

もしくは

※ショートカットキーは windows → 【 F12ボタン 】 mac → 【 Command + Option + I 】

です。

どうでしょうか？ご自身のパソコンでも変わりましたか？

では、「/* 解説します */」と書いている部分を説明します。

その他marginやpaddingは余白をいい感じにしているだけですので説明は省きます。(笑)

TBレスポンシブコードの説明

headerと.columnsで使用したCSS

まず、メディアクエリ内に書いた

header{
    flex-direction: column;
}

.columns{
    flex-direction: column;
}

flex-direction: row; /* 横並び 左から右へ */
flex-direction: column; /* 縦並び 上から下へ */
flex-direction: row-reverse; /* 横並び 右から左へ */
flex-direction: column-reverse; /* 縦並び 下から上へ */

.column__blockで使用したCSS

.column__block{
    width: 100%;
    max-width: 450px;
}

@media(max-width:600px){
    section{
        margin-top: 100px;
    }

    article,
    article img {
        width: 100%;
    }

    footer{
        padding: 35px 0;
    }
}

article,
article img {
    width: 100%;
}