「見出し画像+小見出し」と「見出し画像+小見出し」の並べ方

質問

「見出し画像（文字と同じ大きさ程度）+小見出しのtext」をいくつか縦に並べたいのですが、その間隔をCSSで設定したいと思います。
■画像A+小見出しtext
（この間隔を制御したい）
□画像B+小見出しtext
（この間隔を制御したい）
★画像C+小見出しtext....以下同じ

「画像+小見出し」をdivでまとめて、それに対して「下方向margin」を与えて間隔を制御したのですが、このやり方は間違った方法なのでしょうか？正しいCSSを学びたいのですが、どなたか教えていただけますか？

回答No.2

steel_gray · ベストアンサー

主題に対する回答を忘れてました。

別に下marginでも上marginでも両方ででもmarginで制御する事は間違いではありません。
ただし両方のmarginが指定されている場合、上下marginは相殺されますので注意が必要です。(参考URL)

以下３つは最初の見出しの前と、最後の見出しの後ろのmarginを除けばお互いのmarinは同じ2emになります。

・見出し {margin-top:2em;margin-bottom:2em;}/*2em+2emで間が4em・・・にはならない。*/
・見出し {margin-top:0;margin-bottom:2em;}
・見出し {margin-top:2em;margin-bottom:0;}

実際には見出しと見出しの間には内容が存在すると思われるので、その内容との兼ね合いと最初と最後の見出しの前後に確保したいmarginを考慮して好きなような割合で上下marginを指定すればよいかと思います。

参考URL：

http://www.y-adagio.com/public/standards/tr_css2/box.html#collapsing-margins

補足

ありがとうございます。<ul>と<li>、もしくは<dl>と<dt><dd>でやることも考えたのですが、その場合行間の制御がなんだかうまく行かなかったので<div>にしてみました。ちなみに、もしsteel_grayさんなら何を使いますか？参考までに教えていただけると嬉しいのですが。とりあえずWinのIEとNN、MacのIEとNNで動作確認ができるので試してみます。

回答No.3

steel_gray

「見出し」というからには<Hn>なのかな？と、感じていました。

どうマークアップするのが適切かは具体的にどんな書類なのかわからないと判断つかないですね。

お礼

大変参考になりました。ありがとうございます。

回答No.1

steel_gray

1.面倒でも正式な仕様書(参考URLは邦訳だけど)を読む。
2.あくまで正しいHTMLがあってのCSS。CSSの為にHTMLを捻じ曲げない。（divやspanを追加するのはやむなし。）
3.IEで確認しない。最終的にはIEでも確認するにしても、Firefox/Netscape/Mozillaのどれかで基本的に作る。（動作が異なる場合、IEの方が妙に都合よく誤った動作をする場合がおおいので）

これらに気をつければ概ね正しいCSSを書けていると思います。（絶対ではありませんが。）

(4.うまくデザインできない時はCSSもまだまだ過渡期と割り切って時にはすっぱり諦める事も大事かも。)

参考URL：

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

補足

早速の回答ありがとうございます。一応、WinのFirefox/NN/IE、MacのNN/IEで動作確認をして問題なかったのですが、とんでもなく間違ったことをしているのかと心配で質問させてもらいました。URL参考にします。