CSSによるボックスの中央寄せ 2

  • CSS
  • 現在地

前書き

前のページで、固定幅ボックスの中央寄せについて記述しましたが、このサイトは可変幅のためそのまま適用することができません。

しかし、前から "1920×1080" 等の高解像度に変更すると、両側のボックスは端にくっついている上、コンテンツ部分の文章はリキッドレイアウトのためか横に長くなり、読みにくくなるのが気になっていました。

とはいえ、完全に文章を固定してしまっては擬似フレームにしている意味がありません。

そこで、可変幅に制限を付けて、両端のボックスごと中央寄せすることにしました。

作り方

この方法は、幅制限を付けたボックスの中に可変幅のボックスを配置する方法です。

  1. まず幅の制限を設定するボックスを設置し、幅の最大値(max-width: 値;)・最小値(min-width: 値)を設定。
  2. このボックスの配置位置を相対配置(position: relative;)、左右の余白を自動(margin: 0 auto;)にそれぞれ設定します。
  3. その中に可変幅のボックスを設置し、完成です。

具体例

メニュー(20%)とコンテンツ(80%)を絶対配置(position: absolute;)により、二分割された幅の合計の制限を、最大値 "1280px"・最小値 "640px" とし、中央寄せする場合。

CSSへの記述(幅制限のためのボックス(div.limit))
  • div.limit{
  • position: relative; margin: 0 auto; max-width: 1280px; min-width: 640px;
  • }
HTML
  • <body>
    • <div class="limit">
      • <div class="menu">メニュー</div>
      • <div class="contents">コンテンツ</div>
    • </div>
  • </body>

追記

CSSでヘッダーとフッターを"%"以外で固定し、本文部分の高さを指定せずに上下(top/bottom)の位置を指定することで可変にしている場合、IE7以下ではCSSの解釈が違うため表示されません。この場合は、IEの条件付きコメントなどで代替措置をしましょう。 試しにこのページで、IE8の互換表示機能を使ってみるとどうなるかわかります。 修正してしまったので使っても変わりません。IE7ではヘッダーとフッターしか映らない状況だったので、修正せざる負えませんでした。(2011年02月03日)

後書き

幅制限のためのボックスを相対位置(position: relative;)に設定するのは、中央寄せしたうえで、中のボックスを絶対位置(position: absolute;)で配置するためです。

また、中のボックスを固定位置(position: fixed;)にすると中央寄せになりませんので、ご注意ください。

fixed の場合でも、左右 (left/right) の値を設定しなければ不可能ではありません。(左側にある場合だけですが)
サイト内関連ページ : CSSの position プロパティの挙動について

ちなみに、このサイトのレイアウトには、紹介したものとは逆に、制限幅を設定するボックスを、可変幅の中に入れて使用しています。最初はこの方法を記述しようとしたんですが、面倒くさくなってやめました。興味がある人は、このページのソースでも見てみてください。

最後に言い忘れましたが、"max-width" と "min-width"(ついでに言えば "max-height"・"min-height" も)はIE6に対応していません。IE6に適用したい場合、JavaScriptで代替措置してみてください。(私はやってませんが。)

スポンサードリンク

inserted by FC2 system