マイティーBlog|リスティング広告やWEBマーケティング情報

トップページ ブログ > デザイン > wrapperの必要性と書き方について

Mighty Ace Blog

マイティーBlog

デザイン

2021.09.04

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%表示にしてくれるのが max-width:100%;なのです。

 

ちなみに…

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

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

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

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

この記事に関連するタグ

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

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

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

Googleアナリティクス,アクセス解析でWeb集客分析・改善なら福岡のマイティーエース

リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください

株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。

あわせて読みたい人気の記事

よく見られている記事

最新記事

BLOG MENU

株式会社マイティーエースのSNSもチェックしてみてください

Copyright (c)2014-2020 MightyAce, inc. All Right Reserved.