１カラムレイアウトが主流になりつつあり、要素を中央寄せにするレイアウトが多くなりました。PCモニターも横長が多いので、レスポンシブルデザインのPCビューでは、要素の横幅が大きくなり過ぎる感じがします。
ブロック要素を中央寄せさせ、コンテンツの一部の幅を狭めたりすると、メリハリのあるレイアウトにすることができます。
ブロック幅を指定する方法はいくつかありますが、便利なのが「max-width」です。
widthプロパティをパーセンテージで指定する方法は、スマホビューでは極端に横幅が狭くなることがあります。
「max-width」で要素の幅をレスポンシブルに
「max-width」プロパティを使い要素幅をmax:480pxにします。
ブロック幅を480pxにしたので、テキストは480px範囲内で折り返しされ、ブロック全体は中央寄せになります。
画像もwidth:640pxが480pxに縮小されます。
スマホ画面では下のような表示です。
CSSのコードは以下の通りです。
.wrap480{
display: block;
max-width: 480px;
margin: auto;
「max-width」を使わずブロック巾をパーセンテージ指定すると、PCビューでは同じように表示されますが、スマホでは下のようになります。
まずPCビューです。
ブロック幅を50%にしています。
スマホで見るとこのようになります。
50％設定のブロック要素はスマホビューの50％に縮小されるので、たいへん見づらくなります。
冒頭のように「max-width」を使うと、PCビューではそれなりの幅になり、スマホでは縮小されること無く画面いっぱいにコンテンツを表示できます。
「max-width」をパーセンテージで指定する
上の例の「ブロック幅50％」は「width: 50%;」とwidthプロパティで指定しましたが、「max-width」にパーセンテージを使ってみます。
「max-width: 50%;」にした画像です。
スマホではこのように見えます。
「width: 50%;」と「max-width: 50%;」では同じ結果になります。
結論としては「max-width」プロパティは“長さ”を指定しなければいけません。