[CSS]可変するレイアウト幅の最大値を制限する簡単な方法

Post on:2011年2月22日

sponsors

ページのレイアウト幅が可変するFluid Layoutにした際、その幅の最大値を制限する簡単な方法を紹介します。

[ad#ad-2]

下記は各ポイントを意訳したものです。

<html>エレメントは、ウェブページで最もレベルが上位のエレメントです。そして、他のエレメントは全て、<html>エレメントに内包されています。

もし、あなたが幅が可変に対応したサイトを作成し、その幅の最大値を制限したい時は、<html>エレメントに最大幅を指定することで簡単に実現できます。

html {
  max-width: 1200px;
}

ブラウザの幅が最大幅を超えた際、コンテンツを真ん中に配置されるようにします。

html {
  max-width: 1200px;
  margin: 0 auto;
}

背景も必要ですか？
<html>エレメントに指定することで、ページの隙間なく配置することができます。

html {
  max-width: 1200px;
  margin: 0 auto;
  background: #eee; /* Fills the page */
}

[ad#ad-2]

また、コンテンツに「position: absolute;」を使用した絶対位置で配置したエレメントがある場合は、「position: relative;」を指定します。
これにより、位置をブラウザウインドウからでなく<html>エレメントから算出するので、期待通りに配置されないことが解決します。

html {
  max-width: 1200px;
  margin: 0 auto;
  background: #eee; /* Fills the page */
  position: relative; /* Fix for absolute positioning */
}

この方法はIE8+を含む、通常のブラウザで動作します。
IE6/7では<html>エレメントをフルの幅で表示しますが、それはこの世の終わりではありません。