ウィンドウ内ボックス周りマージンから可変

すみません。語彙力あまりない人です。はい^^;
例えば、下の画像をご覧ください。
ディスプレイか何パーセントか真ん中にコンテンツがあります。
赤枠内がコンテンツ部分ですね。
ヘッダーなどコンテンツの左右にマージンが入ってますよね。
で、これ、1320pxくらいのディスプレイ幅だと思います。

以前作ったデモサイトです。デモサイト作成用のサイトの中から初心者模写コーディング用に使用したものを載せてます。

webサイト作るときって、幅が小さくなっても大丈夫かなー?って
画面幅をリサイズして確認するじゃないですか。
画像やコンテンツが飛び出してないかなーとかって。
その時に、コンテンツ幅とウィンドウ幅が同じになるまではコンテンツ外のマージンを減らしたい。と思ったとします。

そういう時、コンテンツ幅を指定します。

仮に赤枠を<div class=”container”></div>とします。
青枠を<div class=”header”></div>としましょうか。

<main>
  <div class="container"> //赤枠
    <div class="header">  //青枠
      00000000
      00000000      
      00000000
      00000000
    </div>
  </div>
</main>

こんな感じですか?
かなり端折ってます。
<head>内とか書いてません。すみません。
備忘録なので、<head>内は別で保存します^^;

body{
  width:100%;
}
.container{
  width:1100px;
  margin:0 auto;
}
.header{
 }
.article{
}

@media(max-width:1100px){
  .container{
    width:auto;
    margin:0 10px;
  }
}

コンテンツ全体がディスプレイ幅より小さいので、
class containerにwidthで幅を指定しました。1100px。

ディスプレイ幅より小さいので、marginの左右をautoにして中央に来るように。

これで、ディスプレイ幅が1100pxになるまではマージンが可変します

次にメディアクエリを設定。
コンテンツ幅の1100px以下はウィンドウ幅に応じて小さくなってほしいので、
@media(max-width:1100px)を設定
そしてコンテンツ幅をautoにします。width:auto;です。
これだけだと左右にぴったりくっつく感じで窮屈に見えると思うので
ほんの少しmargin入れました。margin:0 10px;です。

これで画面幅に応じてマージンから減っていくので、少しくらいは画面幅が小さくなってもコンテンツの大きさが変わりにくいですね。見やすさup!になるかな♪

こんな方法あるんだーって感激しちゃったんで書きました(笑)
こんなん常識だぞってお叱り受けそうですが、大目に見てもらえると嬉しいです
精進させていただきます。みなさん、よろしくお願いします。


コメントを残す