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%としても同じ表示になります。

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

Request Materials資料請求

Webマーケティングにおけるパフォーマンス改善のための資料がダウンロードできます。

• ● web広告の改善事例が知りたい方
• ● 現在お願いしている代理店との比較をしたい方
• ● サービスの全体像・料金を知りたい方

資料請求

サービス概要・運用方針などを掲載！
アカウント分析の資料サンプルや実際の事例などサービスをご検討の方はぜひご一読ください。

ご相談お問い合わせ

Web広告をご検討中の方はお気軽にご相談ください。
お客さまの目的や広告運用状況に合わせて、最適なWeb広告運用プランをご提案いたします。