wrapperの必要性と書き方について

wrapperとはそもそも何か

Webページは常にユーザーが読みやすい幅に包まれている必要があります。

例えば、mainとasideがあるページでは、小さいサイズの画面だと問題はありませんが

大きいサイズの画面になるとasideとmainが左右に離れてしまい

とても見にくい画面になってしまいます。

これを解決するのがコンテンツを包む箱「wrapper」という概念です。

基本的な書き方

wrapperに必要なものは、「要素の幅」と「中央寄せ」です。

基本のcssは以下のようになります。

.wrapper {
width: 1000px;
max-width:100%;
margin: 0 auto;
}

ここで大事な事が「width」と「max-width」を併用する点です。

例えばここではコンテンツ幅が1000pxとなっているため

ブラウザの幅が1000px以下になった場合横スクロールバーが発生してしまいます。

1000px以下になった場合、

スクロールバーを表示させず100%表示にしてくれるのが ｍax-width:100%;なのです。

ちなみに…

.wrapper {
width: 100%;
max-width:1000px;
margin: 0 auto;
}

実は先ほどの書き方とは逆に

max-widthを固定値に、widthを100%としても同じ表示になります。

こちらはお好みなので、自分が分かりやすい方法で書きましょう！

正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）

Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。