広がりすぎないように上限をつける

01 / 05

広い画面では横に伸びすぎる

width: 100%; は「親の幅いっぱい」という意味。狭い画面ではありがたいけれど、大きな画面では文章が端から端まで伸びてしまう。

1行が長すぎると、次の行の先頭を目が見失う。広ければいいわけじゃないんだ。

02 / 05

max-width は上限を決める指定。書いた値より大きくはならず、それより狭い画面ではちゃんと縮む。

width: 100%; と組で書くのが定番の形だよ。

.container {  width: 100%;  max-width: 640px;}

03 / 05

width: 640px; は決め打ち。幅400pxの画面では、はみ出して横スクロールが出てしまう。

max-width: 640px; なら、

片側だけ縛るのがこの指定の役目だよ。

04 / 05

画像は自分の大きさで表示されるので、親より大きいとはみ出す。max-width: 100%; と書けば「親より大きくならない」という上限になる。

幅の対応でいちばんよく使う1行かもしれないよ。

.frame img {  max-width: 100%;}

05 / 05

文章なら 600〜700px くらい、写真を見せる場所ならもっと広く。中身にとって読みやすい幅が上限だよ。

ここから書いてみよう。