幅（width）と高さ（height）を指定するCSS【CSSの書き方入門】

containerクラスのdivは画面いっぱいにどこまでも広がっています。 ちょっと見にくいので、上限の幅を決めてあげましょう。

要素のサイズを指定する

containerクラスのdivが、決まった大きさよりも横に広がらないようにCSSを書き加えてみましょう。 max-widthという、最大横幅を決めるプロパティを使います。

.container{
  background: white;
  max-width: 1200px;
} 

白背景部分の幅が短くなりました。

今回はmax-width＝幅の上限は1200pxという指定をしています。 この場合、見ている画面が1200px以上の場合のみ上図のように隙間ができます。

画像のはみ出しを抑える

ブラウザを小さく（細く）してみましょう。

指定した1200px;よりも小さいときには、画面いっぱいまでの幅で表示されていますね。

.containerの幅はぴったりですが、画像がはみ出しています。 画像も白い背景内に収まるように、上限幅を決めましょう。

img{
  max-width: 100%;
}

これは「img（画像）要素は、最大幅を100％にする」という指定です。 ここでの100%は、親要素の幅を基準にしています。

親要素は、その要素を囲っている要素のこと。 今回の場合、imgの親要素は<div class="container">です。

img{ max-width: 100%;}は「最大でも親要素（.container）と同じ幅」という指示になります。 こう書いておくと、画像は.containerからはみ出しません。

要素の大きさを設定するCSSプロパティ

要素の幅や高さを指定するプロパティは、今回使ったもの以外にも存在します。

【要素のサイズを決めるCSSプロパティ】

次のレッスンでは、max-widthを指定したことで左に寄ってしまった<div class="container"> を中央に配置します。