レスポンシブデザインを適用する準備として、<head>タグ内にviewportを設定しましょう。
viewportを設定しないと、スマートフォンやタブレットでの閲覧時にメディアクエリが正しく機能しません。
ただし、ここでviewportの中身の書き方を暗記する必要はありません。
メディアクエリは、@media (条件) { .... }という様に書きます。
指定された条件が当てはまるときにのみ{ }内のCSSが適用されます。
メディアクエリの条件には、max-width(最大幅)、またはmin-width(最小幅)を指定できます。
max-width: ◯◯pxと指定すると、画面幅が◯◯px以下の時にCSSを適用できます。min-widthはその反対となります。
container要素のwidthが100%なので、画面幅が2000pxなどとても大きい時も画面いっぱいに広がってしまいます。
max-width: ◯◯px;と指定すると、画面幅を拡大しても、要素の幅の上限が◯◯pxとなります。
