ADP: floatレイアウトでつまづかないためのTipsと、A List Apartのネガティブマージンの説明（ただし英語）を元に、デザインテンプレートを作ってみた。dt1110サンプルと、dt1110のZIPファイルを参照されたい。
対応UAは、IE6, Mozilla, Opera, Safari, MacIE5あたり。Macromedia Contribute 3で更新することを想定してコメントを各所に入れているが、テキストエディタで編集してもいい。文字コードはUTF-8。基本的に、HTML部分はdt0710と同じ構造にしてある。
ついでに、ネガティブマージンがなぜ必要かについて説明しておこう。日本語でまともにこれを説明しているとこが少ないので。とりあえず、横2段組のレイアウトにしたい、というときに限定して説明する。3段組はただの応用。
まず、ネガティブマージンが必要になるのはfloatを使うときだ。
で、現在のよくあるレイアウトでfloatを使う理由は、2段ぶち抜きのfooterを作りたいから、ということになるだろう。footerなんていらねーよ、2段ぶち抜きじゃなくていいよ、というなら、ADP: div要素なしレイアウトのようにposition: absoluteを使ったほうがはるかに（HTMLソースの）無駄が省ける。
次に、floatを使う場合は、ADP: floatレイアウトでつまづかないためのTips（前述）にあるように、floatさせる各ボックスに横幅を指定する必要がある。となると、2段組で、片方が横200ピクセル、もう片方が画面横幅の残り、ということをしたいときに、指定ができなくなってしまう。100%-200pxなんていう指定が出来ればいいんだけれど。ちなみに、両方ともパーセント指定で合計100%というのなら、さほど問題はない。
で、100%-200px、という指定を実現させるのがネガティブマージンだ。つまり、ピクセル指定していないほうの段のwidthは100%とし、marginを-200pxにすることによって、できそうになかったレイアウトが実現できる、ということだ。
ADP: floatレイアウトでつまづかないためのTips（前述）にあるように、横に並べる場合、marginは先にfloatしたほうに指定する、というお約束がある。ので、たとえば、メニューが左（200px）、本文が右（残り）で、メニューを先にfloat:leftさせる場合（HTMLのソースでメニュー部が先にある場合）は、メニューのwidthに200px、margin-rightに-200pxを指定する。そして、本文をfloat:leftし、widthを100%にする。本文のwidthは100%なので、メニューと重ならないよう、本文の中の要素でmargin-leftを200pxとれば完成。逆に、本文を先にfloat:rightさせる場合（HTMLのソースで本文部が先にある場合）は、本文のwidthを100%、margin-leftを-200pxにする。
あと、メニューと本文のブロックが重なっているので、メニューの中の要素にはposition:relativeとz-indexを適宜指定したほうがいいようだ。
というわけで、ネガティブマージンはレイアウトの幅を広げるのに役に立つ。が、説明で「中の要素」という言葉が頻発するように、div要素を使わずになんとかしよう、というのは難しいと思われる。また、float自体を使いこなせていないとレイアウトが崩れやすくなるので、十分な注意が必要だ。今回のdt1110もこのままではpre要素は使いものにならないので、使う必要がある場合は「HTMLの構造をいじる」必要がある。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/398
初めまして。
確かに日本語でここまで説明されているサイトはありませんでした。非常に解りやすくて素晴らしいです。ネガティブマージンはリキッドデザインで多段組のレイアウトを実現したい場合には重宝する技ですよね。
ありがとうございます。ネガティブマージン、たしかに習得必須テクニックになりそうな感じがしています。
あわわ！なるほど♪
むりやり、ホームページビルダーでCSSいじってたんで、
なんとかしたいと思いつつも解決できずに、ほったらか
しにしてました(笑)
まだまだ、わからないことだらけですが、もうすこし
勉強してみようかと思います。
ありがとうございました。感謝♪感謝♪
ありがとうございます。橘さんのサイト、テンプレート提供、という点ではかぶってますが、指向性は「かなり」違いますね。勉強するというよりも、ひとつひとつ、これはなんかおかしいぞ、と思ったところから改善していくのがいいのではないかと思います（自戒を込めて）。
はじめまして。ネガティブマージンを使ったデザインをやってみたいな～と思っていたら、ここを見つけました。おかげで無事にリキッドデザインに移行できました。ありがとうございました。
ありがとうございます。使えると思ったところは、どんどんパクっていってください。また、解説もわかりやすくする余地がたくさんあると思いますので、そちらも期待しています。
Momomoさん、はじめまして。ハルと申します。
Web Design、CSSの記事大変勉強になります。
１つCSSレイアウトで質問があり、書き込みさせて頂きます。
現在仕事で使用するブログをCSSでレイアウトすることになり、
リキッド２カラムを予定しているのですが、こちらで解説されているネガティブマージンを利用した方法と、
http://desperadoes.biz/style/dan/index.php
こちらで紹介されている片方float,後続ボックスのmarginでfloat分のスペースを空ける方法、と２種類あることに気づきました。
両者は、ただ手法が違うだけで、安全な２カラムをするという点では何も違いはないのでしょうか？それとも、片方floatのやり方にはなにか致命的な不具合でもあるのでしょうか？
どちらの方法でレイアウトしようか長いこと悩んでしまって、実際に解説されている方に聞いてみようと思って書き込みさせて頂きました。
お忙しいとは思いますが、暇なときにでもご教授お願いいたします。
ハルさん、ご質問ありがとうございます。間違っていたらごめんなさい、なんですが、回答します。サンプルのままであれば、どちらも安全だと思います。ただ、サンプルと違い、HTMLのソース上で、幅を固定している側（たぶんナビゲーション）のdivを後にし、固定しない側（たぶん本文）のdivを前にする場合では、ネガティブマージンを使えばまったく同じように配置できますが、片方floatのやり方だとうまくいかなくなります。
Momomoさん、お答えして下さってありがとうございます。
片方floatのやり方では、htmlの構造によって出来ない可能性もあるのですね。実際に試して検証してみたいと思います。何かわかりましたらご報告させて頂きます。
ありがとうございました。m(__)m
Momomoさんの仰るとおり、floatする側が本文より後に位置するときは、うまく２カラムにすることができませんでした。
これは、floatに重なるのは後ろにあるブロック要素だからなのですね。(間違ってたら恥ずかしい。
重ね重ねありがとうございました。m(__)m
こちらでもちょっとやってみました。後日、まとめてエントリにしたいと思います。