IE6でもCSSのみでmax-widthを実現する

カテゴリ:CSSテクニック 2009年11月11日 00:55

IE6でもCSSのみでmax-widthを実現している図

今回も CSS Play でのテクニックの紹介です。
タイトル通り、IE6 には対応していないはずのmax-widthをハックなしの CSS のみで実現する方法が書かれています。n

ただ、多少 HTML を工夫しないといけない箇所があり、まったくの CSS のみ、とは違うかもしれませんが、div 要素を 2 個ほど追加するだけなので、それでデザインの制限がはずれるなら積極的に採用してもいいと思います。n

こちらの件はコリスさんの [CSS]ハック無しでIE6でmax-widthを実現するスタイルシート でも紹介されていました。n

さて、今回もこのテクニックをひも解いていってみましょう。このテクニックの肝は、overflow: hiddenの意外な使い方にあります。(結構当たり前? でも自分は結構最近知りました・・)n

実際の demo は以下にあります。それぞれ、コンテンツをセンタリングさせたもの、左寄せ、右寄せとなっています。n

▼EntryMore▼

overflow: hidden は、float をクリアする性質がある

さて、解説はセンタリングしている demo をベースに解説していきたいと思います。
ちょっと仕様などからはどうしてこういう挙動なのかを見つけることができなかったんですが、個人的な推測ではインライン要素は回り込むが、ブロック要素は回り込んでいない(背景が下に表示されるのがその証拠)ので、ある意味で overflow 状態になっているのでは、と思っています。n なので、overflow: hiddenを使うと、まるで float がクリアされたようになるのではないでしょうか。
下図は実際に overflow: hidden を用いてクリアしたイメージです。見出しの部分に overflow: hidden を指定しています。n

overflow: hiddenでfloatがクリアしているイメージ

見てもらうと float がクリアされているのが分かるかと思います。このクリアする性質を利用するわけです。今回のサンプルでは、コンテンツ部分(class="content")に overflow: hidden を設定します。n

2 つの空要素(div)をコンテンツの前に配置する

ここがちょっとスマートではない部分です。が、IE6 で、CSS のみで max-width を実現するためには目をつぶりましょう。
下記の 2 つの空の div 要素を、コンテンツ(今回のサンプルの場合はclass="content" の部分)の直前に配置します。n

まず最初の div を、幅が 50% で左に float させます。そしてさらに、コンテンツの幅の半分のネガティブマージンを float とは逆方向に取ります。(今回の場合はmargin-right: -450px) CSS は以下の感じ。n

続いて、2 番目の div を上記の設定と逆にします。n

ネガティブマージンをはずすと・・・?

なぜ、ネガティブマージンが必要なのでしょうか。
実際にはずして見てみると、以下のような感じになります。n

floatでテキストが中央に寄った状態

見たことがある人は見たことがあるかもしれませんが、左右にフロートされている要素に続いて、テキストを配置すると、フロートの隙間にテキストが流れ込みます。それと同じような感じですね。n

overflow の設定で float が clear されているのでそのような状況になるようです。
さて、ここでネガティブマージンを元に戻してみましょう。
すると、ネガティブマージン分コンテンツの幅が確保されます。n

ネガティブマージンが max-width の正体

実は、これがもう max-width の正体です。(IE6 向けにまだいくつか設定しないといけないスタイルがありますが)
つまり、幅 50% の div 2 つによって本来はコンテンツの入り込む余地がないところへ、ネガティブマージンを使うことで無理やりコンテンツが収まる範囲をこじ開けた、というイメージですね。n

これにより、IE6 でも max-width として幅が確保されるわけです。
そして 50% ということは、ブラウザの幅に追従するということ。
なので、ブラウザを小さくしていくと、ブラウザの幅が無理やりこじ開けた幅より小さくなるため結果的に縮小していく、というわけです。n

これでモダンブラウザ向けには問題なく max-width と同じ効果が得られます。(ただ、モダンブラウザ向けだけならそもそも max-width を指定すればいいので今回のテクニックは意味がないのですが)n

IE6 向けには少々細工が必要

続いて IE6 向けに少々細工をします。それが以下の指定です。n

最後に指定しているのは、それぞれ微妙に異なる IE6 の挙動を制御するためのものです。
まず最初に.contentに対してfloat: leftを指定します。これを追加しないと、横幅がブラウザの表示領域いっぱいになってしまいます。n

続いて、.content 内の.innerに対して上記 2 つのプロパティをしています。これを指定しないとネガティブマージンでこじ開けた幅いっぱいにならなくなります。また、overflow を省くと縮小時、若干の横スクロールが発生してしまうので、これを発生させないための処理です。n

簡単ですが、これらを設定することで IE6 でも CSS のみ(+ HTML に細工)で max-width を実装することができます。n

この記事のカテゴリー一覧を見る⇒CSSテクニック

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/161