幅と高さ
幅と高さが効くのはブロック要素
width と height はブロック要素に効きます。何も指定しないブロック要素は横幅いっぱいに広がるので、文章が長い行になって読みにくくなりがちです。そこで幅を決めて止めます。
ただし width をそのまま決めてしまうと、画面がせまいときにはみ出します。代わりに使うのが max-width です。max-width は「ここまでは広がってよい」という上限で、それより画面がせまければ画面に合わせて縮んでくれます。
.site-main {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}前の回で書いた margin auto がここで効きます。720px より広い画面では余った幅が左右に分かれ、中身が中央にそろいます。
パーセントで親に合わせる
width を 100% にすると、親要素の幅に合わせるという意味になります。表や入力欄のように、置かれた場所の幅いっぱいに広げたいものに向いています。
height は使いどころが限られます。中身の量で高さが変わるものに高さを固定すると、あふれて崩れるからです。今回のように正方形にしたい写真など、大きさが決まっているものだけに使います。
書くこと
ヘッダー・本文・フッターに max-width と左右 auto をまとめて指定します。写真は 160px の正方形、表と入力欄は 100% にしましょう。
課題
- .site-header / .site-main / .site-footer の max-width を 720px にする
- .profile-photo の width と height を 160px ずつ指定して正方形にする
- .skill-table と .form-input の width を 100% にして、置かれた場所いっぱいに広げる