通常ページデザインを行うとき、教科書通りで行くと、まず「大枠」と呼ばれるものを、たとえば「wrapper」とか「countainer」とかいうID名の<div>で制作し、それを画面中央に浮かぶように、CSSで右と左に{margin:auto}をかけたのち、その内側に「ヘッダー」や「メインヴィジュアル」を作るのが一般的とされています。
ただ、いろいろな企業サイトを見てみると、たとえば「ヘッダー」や、「フッター」、ページ途中の「ナビゲーション」などが「大枠」から飛び出して、画面いっぱいに広がっているデザインを見たことがあると思います。
たとえばこのページのヘッダー部分も画面のサイズに関わらず、必ず画面の端っこまで伸びるようにデザインされています。
ためしにウインドウサイズを変えたりしながら確認してみてください。
これの仕組みを解説していきたいと思います。
まず、通常の制作の仕方は上図のようになります。
画像の例でいうと、ID名「wrapper」の<div>を大枠と構えて、その内側に「ヘッダー」や「ナビ」を大枠の横幅寸法を超えないように設定するのが一般的です。
だから、ヘッダーやナビは原則として、大枠を飛び出さず、全体的に横の幅が統一されたデザインになるわけです。
非常にすっきりとして、統一感のあるデザインではありますが、どうしてもやや狭い、限定的な印象を受けてしまいます。
そこで画面幅いっぱいに広がる要素を配置することで、画面を広く印象付けることができます。
仕掛けはこうです。
通常は「大枠」を作ってその中に、要素を加えていきますが、今回はあえて大枠を作らずに、<body>の直下にすぐ「ヘッダー」や「メインビジュアル」、「ナビゲーション」などを作ってしまいます。
そして、横幅いっぱいに広げたい要素に対しては「横幅:width」を設定しません。
そうすることで、横幅を広げたい要素を仮に「header」だとすると、「header」を包んでいる親要素は<body>となりますが、<body>は原則として画面サイズと等しいものとして扱われので、つまり画面横幅いっぱいになります。
通常通り横幅を決めたデザインをしたい場合は、各要素ごとに「横幅:width」と、「margin-left:auto;」「margin-right:auto;」をかけるようにしましょう。
たとえば本ページのヘッダーとコンテンツ部分には下記のようなスタイルが設定されています。
【ヘッダー部分】※横幅に関する記述がありません
h1 {
font-size: 36px;
color: #FFF;
background-color: #BF0000;
text-align: center;
padding: 5px;
}
【コンテンツ部分】
#contents {
width: 740px;
margin-right: auto;
margin-left: auto;
以下略
}
という風になっております。
別の項目で説明している、APエレメント(position:absolute)等を使えば、コンテンツの上にまたがった横幅いっぱいの要素を作ることもできます。
たとえばこんな感じ。
上のナビゲーションバーには以下のスタイルが入っています。
#navi {
position:absolute;
height:80px;
z-index:1;
width: 100%;
background-image: url(navi_bg.png);
}
※ミソは、「position:absolute」で絶対配置をした後、あえて上下左右の位置を設定していないところです。
こうすることで、「position:relative」同様にHTMLとCSSで指定された位置に配置されたのち、その下に続いている要素が、「position:absolute」を設定しているdivの下に潜り込むようにレイアウトされます。
お試しあれ!!