掲示板/スタイルシート質問板/過去ログ/一覧/ marginは基本的に使うな？

0 名前： esu ： 2007/01/20（土） 07:48 ID:D0z9A6aw: はじめまして。
Mac環境でホームページを作っています。まだまだ勉強不足な者です。
ボックスモデルのマージンについて質問させていただきます。

IE5.5以前ではボックスの解釈が違ってしまっているという事で
今まではパディングは使わず、マージンを使って余白を作っていました。
ですが、たまに「marginは基本的に使わない方がいい」という指摘を
見かけます。

サイトの確認はSafari2.0でしています。
まれに他のPCを借りてIE6で見ている分にはmarginが悪さをしている
場面に出くわした事がありません。
参考に読んでいる本でもmargin指定はしてあるケースもありますし。
ですが、自分のしていることが間違っていることなのかもと思うと不安です。

marginを使うとまずいというのは本当なのでしょうか？
どんなときに、不具合が出るのでしょうか？
ご存知の方がいましたら、アドバイスをくださいませ。
また、ボックスの組み方（？）に主流があるのなら、お伺いしたいです。
marginは使わず、paddingを使いながらIE5.5以前対策には別ファイルで
cssハックするのが主流なのでしょうか？

1 名前： K+S ： 2007/01/20（土） 07:48 ID:nROqylMa: > 「marginは基本的に使わない方がいい」という指摘
その根拠が示されない限り無意味な指摘のように思います。

clear を指定した要素に margin-top は予期せぬ解釈が行われるかもしれません。

2 名前： カヅサツ ◆ThCi95HEzw ： 2007/01/20（土） 07:48 ［URL］ ID:O5hEMlpW: > たまに「marginは基本的に使わない方がいい」という指摘を見かけます。

その指摘が掲載されたページの URL をいくつか教えていただければ、検証できるかもしれません。

3 名前： esu ： 2007/01/20（土） 07:48 ID:D0z9A6aw: K+Sさん、カヅサツさん、ありがとうございます。
その指摘があるページをブックマークしておいたのですが、
（http://www.stylesheet-stylebook.com/archives/000041.php ）
内容が変わってしまったのでgoogleのキャッシュから抜粋します。

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
この記事は、Mezzoblueのデイブ・シェイ氏による“CSS Crib Sheet”という記事を訳したものです。リンク先のサイトはすべて英文のみとなっています。

（中略）

マージンは崩れる。防止のためにpaddingやborderを利用しよう
不必要な余白や、必要なところに現れてくれない余白と格闘するかも知れません。もしmarginを使っているなら、恐らくその崩れが原因でしょう。アンディ・バッド氏がどういうことが起こりうるのかを説明しています。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

とあり、アンディ・バッド氏には次のリンク先が

http://www.andybudd.com/archives/2003/11/no_margin_for_error/

当時、気になってこの記事を読んでいたのですが、英語サイトに行った途端に
読む気が萎えてしまいました。
どこかに同じ内容を日本語で紹介していないかと探したのですが
今の所、見つかっておりません。

4 名前： naka ◆9gBxIXDbBT ： 2007/01/20（土） 07:48 ID:iLppaG66: >マージンは崩れる。

全てでは無く、float についてであれば、ばあど氏も書かれています。
http://blog2.fc2.com/gowest/?no=31
http://gowest.blog2.fc2.com/blog-entry-38.html

5 名前： esu ： 2007/01/20（土） 07:48 ID:D0z9A6aw: ＞nakaさん

ありがとうございます！
まだ勉強不足で、こういった参考になるサイトもあまり知らないので、
float周辺の問題と合わせて参考になり
本当に助かります。

私の参考にしているどの本も、マルチカラムには
floatを推奨しているように読めたので、リンク先の記事を読んで
う～んとうなってしまいました。
しかし、どのような方法をとっても初心者が気楽にさくっと作る感覚では
できなさそうですね。

正直、マルチカラム部分だけはテーブルで大枠をさくっと作っちゃって
floatを使わずにwidthとmarginを使ってレイアウトを調整する（cssハックなしで）
というやり方では許されないの？と思ってしまいます。
正しい事ではないですが、自分ができる努力と使える時間を考えると…。

それでも、何が正しいかもわからないような自分が
どうこう言える事ではないのかもしれませんね。
まずは勉強しろよっていう。
アドバイスありがとうございました！

6 名前：匿名： 2007/01/20（土） 07:48 ID:Rt.j/.AI: >>5
float のメカニズム（ノウハウではない）に関しては
http://www.kanzaki.com/book/css/3-2.html
が詳しい。

個人的には、float を使う段組は（そうする理由がない限り）あんまりお勧めしないかも。

別に margin に限らず、「特定の条件下では、このプロパティの使用には注意」という場面は多い。前提条件が忘れられて「margin は使うな」の部分だけが一人歩きするのは、良くない事態だと思う。

> マルチカラム部分だけはテーブルで大枠をさくっと作っちゃって

それだけは止めてくれ。土下座してでもお願いする。最近その手のブログツールが多いが、非力なマシンを使ってる身としては泣きたくなるんだ。

7 名前： カヅサツ ◆ThCi95HEzw ： 2007/01/20（土） 07:48 ［URL］ ID:O5hEMlpW: マルチカラム講座としては http://www.geocities.jp/multi_column/ もオススメします。

8 名前：アヤ： 2007/01/20（土） 07:48 ID:I/L72zbC sub-0y: >>3の記事が気になったので、読みに行かせていただきました。

「マージンが崩れる」というのは、Collapsing marginsのことのようです。
仕様書だとこの辺。
http://www.w3.org/TR/REC-CSS2/box.html#collapsing-margins
日本語訳のページは、多分どこかにあると思うんですが。（昔に読んだのですが、お気に入りに入れ忘れました・・・）

上記の1段落目の「paddingまたはborder領域を挟まない2つ以上のボックス（隣接または入れ子）のmarginは、結合して（重なり合って？）1つのmarginを形成する」（私的訳なので間違ってたらすみません）という仕様が頭に入っていないと、考えたようにmarginが適用されないため、

>マージンは崩れる。防止のためにpaddingやborderを利用しよう

ということになるのかと。

リンク先の例をとると、下記のようなソースを書いた場合。
<p style="margin:10px;">一段目</p>
<p style="margin:20px;">二段目</p>
上下の段の間には10px＋20pxで30pxのマージンが出来ると考えます。しかし、「paddingまたはborder領域を挟まない」という部分が適用され、「結合して1つのmarginを形成する」ので、20pxのマージンしか表示されないということに。

Collapsing marginsで調べたら、日本語では「マージンの相殺」って主に言うらしいですね。
でも、相殺って言うと互いに打ち消しあう構図が思い浮かんでしまう・・・。

9 名前： esu ： 2007/01/20（土） 07:48 ID:D0z9A6aw sub-Ds: ＞匿名さん
ありがとうございます！
「特定の条件下では、このプロパティの使用には注意」というのが、
ようやく分かり始めてきました。
仕様を理解するのにする努力は、やる気でるのですが
ブラウザのバグのせいでする努力はどうにもやる気が出ないと
言うのが、css習い始めている今の本音といいますか…。スイマセン。
（このmarginの件は仕様についても含んでいましたが）
がんばります。

＞カヅサツ
ものすごく役にたちますね！感動しました。
ありがとうございます。
ケーススタディからバグの原因と対策をまとめてくれた
先人に、心から感謝です。

＞アヤ
スッキリしました！
確かに、自然と計算に入れて組むにはややこしいですね。
ありがとうございます。

10 名前： Z ◆XTzyosZXcL ： 2007/01/20（土） 07:48 ID:CSqyQR5N sub-Cl: 　出遅れちゃいましたが(^^;

>>8
>日本語訳のページは、多分どこかにあると思うんですが。
　私が控えてある和訳資料は下記ですね。

http://www.y-adagio.com/public/standards/tr_css2/toc.html

　W3Cにある仕様書和訳へのリンク集（http://www.w3.org/Consortium/Translation/Japanese ）の方にあるCSS Level2仕様書和訳へのリンクについては、残念ながらリンク切れを起こしたまま放置のようです。

11 名前：匿名： 2007/01/20（土） 07:48 ID:Rt.j/.AI sub-kJ: >>8
なるほど感謝。マージンの相殺はそんなにややこしいものではないと思うがなあ。
http://www6.plala.or.jp/go_west/nextcss/ref/article/mgn_clps.htm

>>9
もし Safari 使いなら、Safari（と言うか WebKit の方だが）の CSS 対応はトップクラスだし、面白いプロパティもあるから、楽しみながら覚えると良いと思う。

習い始めのうちは、ブラウザのバグなんて非生産的な話は忘れちゃって良いよ（その都度確認すれば良い）。覚えるべき大事なことは他にたくさんあるわけだし。