シングルカラムレイアウトで要素幅を指定するなら「max-width」の活用

１カラムレイアウトが主流になりつつあり、要素を中央寄せにするレイアウトが多くなりました。PCモニターも横長が多いので、レスポンシブルデザインのPCビューでは、要素の横幅が大きくなり過ぎる感じがします。

ブロック要素を中央寄せさせ、コンテンツの一部の幅を狭めたりすると、メリハリのあるレイアウトにすることができます。
ブロック幅を指定する方法はいくつかありますが、便利なのが「max-width」です。
widthプロパティをパーセンテージで指定する方法は、スマホビューでは極端に横幅が狭くなることがあります。

「max-width」で要素の幅をレスポンシブルに

「max-width」プロパティを使い要素幅をmax:480pxにします。

画像もwidth:640pxが480pxに縮小されます。

スマホ画面では下のような表示です。

CSSのコードは以下の通りです。

.wrap480{
	display: block;	
	max-width: 480px;
	margin: auto;
}

「max-width」を使わずブロック巾をパーセンテージ指定すると、PCビューでは同じように表示されますが、スマホでは下のようになります。

まずPCビューです。