CSSでテーブルのように画像を均等表示させるには？

質問

お世話になります。CSS初心者です。
もしかしたらweb制作者様にとっては簡単なことかもしれませんが、いろいろ調べてもよく理解できなかったので、どうか教えてください。
添付画像のようなレイアウトでサイト制作しています。
このように#rightbox内に10の画像を均等に表示させたいと思っています。
かつてテーブルタグといったものが使われていましたが、現在テーブルは推奨できないということで、外部CSSファイルでレイアウト表示させたいと考えています。
このようなレイアウトで表示させる場合、どのようなCSSの記述が好ましいでしょうか。
参考書などで調べたところ<ul>と<li>要素を使用するのが一般的だということでしたが、正直よく分かりませんでした。どうかご教授お願いします。

ちなみにこの画像のリストはクリックするとThickboxで大きな画像が表示されるようにしたいです。

回答No.6

metametamu · ベストアンサー

一応補足しておきます。

＞rightmenuがleftmenuの下に回り込んでしまい、まるでrightmenuの総widthが639pxをオーバーした時のような状態になっています。

これはおそらく画像のボーダーの分639pxを超えてしまうので幅に収まりきらなかったのだと思います。

＞背景画像を指定しているのですが、それも10種類の画像の部分には表示されていない状態です

li要素にfloatが指定されていますが、floatを指定されたボックスは通常の流れから取り除かれるので、そのぶんの高さが計算されず、結果的にdiv#rightmenu-insideの高さは0になってしまいます。
本来これはclearすればいいのですが、今回のレイアウトでclearを指定できる要素が無いので、floatを指定した親要素にheightを指定します。ちなみにfloatで複数段になる場合などはoverflow:hidden;を使うといいと思います。(バグの量ではheight＜overflowなので基本height推奨ということで)

お礼

返信遅くなり申し訳ありません。
回答ありがとうございます。
しかもこれほど親切に解説までしてくださって...お礼の言葉もありません。
ご指摘のようにCSSいじってみたところ、今回の問題を解決することができました。ただ、やはりDWのレイアウト崩れが気になるところですが...
いろいろなブラウザでレイアウトを確認してみたところ、旧バージョンのIEのみ、DWのようにレイアウトが崩れて表示されました。背景のpng画像も透過効果が表示されていなかったので、バージョンを最新のものに更新したところ、レイアウトもpng画像の透過部分も問題なく表示されました。素人考えですがDWもいまだにMXを使用しているので、そこらへんが原因なのかと思いましたが、どうなんでしょうか笑。
とにかく私のような素人に親切にご指摘くださり、本当にありがとうございました。
心より感謝します。

回答No.5

metametamu

HTMLそのままでCSSの方だけ書き換えてみます。
説明もつけておきます。

div#rightmenu {
width:639px;
float:right;
}
div#rightbox-inside {
/* 親要素でwidthを指定してあるので子要素では同じ値のwidthを指定しません */
padding:0 30px; /* paddingはwidthと一緒に指定しません */
background-image:url(../image/03.png);
background-repeat:repeat-y;
}
#resultList {
height:48px; /* li要素のclearは位置的に難しいのでheightで高さを取ります　overflow:hidden;でも可能 */
margin:0 0 0 -11px;
padding:0; /* ul要素のデフォルトスタイルを打ち消す */
list-style:none;
}
#resultList li {
display:inline;
float:left;
margin-left:11px;
}
#resultList li a {
display:block; /* きっちり揃えたい時にはインラインボックスよりブロックボックスにした方がバグに会いにくいです */
}
#resultList li a img {
display:block;
width:48px; /* 毎回HTMLでwidthやheightを指定するのが面倒な場合はcssでもできます */
height:48px;
border:0; /* アンカー要素内の画像にはデフォルトでボーダーが付くので打ち消します */
}

ちなみに、Dreamwaver上でのレイアウト崩れはあまりあてにならないようです。IE、Firefox、Opera、Safariあたりで確認が取れていれば大丈夫でしょう。

回答No.4

metametamu

2.の回答のmarginとpadding変な指定になってましたね、すみません。

＞レイアウト崩れ

サイトの別の部分が崩れるということでしょうか？
一応載せたのはサンプルなので、cssのセレクタはタグ名ではなくidやclass名で指定した方が無難です。

http://www.tagindex.com/stylesheet/basic/format3.html

もしメニューが崩れるなら崩れ方を補足してもらえれば回答できるかもしれません。

補足

返信ありがとうございます。ご指摘の通りセレクタをidで指定してみました。
<div id="rightmenu">
<div id="rightbox-inside">
<ul id="resultList">
<li>
<a href="image/001.jpg" class="thickbox" title="画像の解説"><img src="image/001-thumb.jpg" width="48" height="48" alt="画像の解説"></a>
</li>
～以下略～
</ul>
</div></div>

CSSは現在はこんな記述です。
div#rightmenu {
width:639px;
float:right;
}
div#rightbox-inside {
background-image:url(../image/03.png);
background-repeat:repeat-y;
width:639px;
}
#resultList {
margin:0 0 0 -11px;
list-style:none;
}
#resultList li {
display:inline;
float:left;
margin-left:11px;
}

レイアウト崩れはできるだけ詳細に記述します。表現がおかしいところもあるかもしれませんがご勘弁ください。
DreamWeaverで作業してますが、DW上ではrightmenuがleftmenuの下に回り込んでしまい、まるでrightmenuの総widthが639pxをオーバーした時のような状態になっています。画像も10個のうち最後のひとつだけ改行されています。さらにそのdiv#rightmenu-insideに背景画像を指定しているのですが、それも10種類の画像の部分には表示されていない状態です。
それでも、Firefoxやsafariでプレビューしてみると、レイアウトはちゃんとrightmenuがあるべき位置に収まっており（背景画像は表示されません、paddin-left rightの30pxも間隔ありません）、ますますよく分からなくなってきましたが明らかにおかしいですよね？
申し訳ありません、いまの私の理解度ではちょっと分かりかねます、お知恵を拝借できればと思います。
よろしくお願いします。

回答No.3

yyr446

確か、「Thickbox」は、
　<a href="本画像" class="Thickbox"><img src="サブネール画像"></a>
が前提だったから、
No.1の回答を使うなら、
<li><a href="本画像" class="Thickbox"><img src="サブネール画像"></a></li>
のマークアップで、CSSも若干修正がいるかも．．．

お礼

ご回答ありがとうございます。感謝しています。
調べてみたところyyr446さんの説明の通りみたいです。
Thickboxの表示はきちんと表示されました。
ですが、やはりCSSがおかしいのかレイアウト崩れがおきています。
HTMLとCSSはこのほうに記述したのですが、どうしてレイアウトが崩れるのかが良く分かりません。もしよければ教えてください。

<ul>
<li>
<a href="image/001.jpg" class="thickbox" title="画像の解説"><img src="image/001-thumb.jpg" width="48" height="48" alt="画像の解説"></a>
</li>
～以下略～
</ul>

ul {
height:48px;
padding:0px 30px 0px 30px;
margin:0 0 0 -11px;
list-style:none;
}
ul li {
display:inline;
float:left;
margin-left:11px;
}

回答No.2

metametamu

ulの指定間違えました。
デフォルトのスタイルも打ち消します。

ul{
height:48px;
margin:0 0 0 -11px;
margin:padding:0;;
list-style:none;
}

お礼

ご回答ありがとうございます。感謝しています。
metametamuさんの指示を参考に記述してみたのですが、レイアウト崩れが起きてしまいました。
私の理解力がないせいだと思うのですが...
現在のHTMLとCSSの記述は上記の通りです。
もしよければご教授お願いします。

回答No.1

metametamu

ul、liというのはマークアップの話ですね。今回の場合はul、li要素でいいと思います。

<ul>
<li><img src="A.jpg" alt="" /></li>
<li><img src="B.jpg" alt="" /></li>
<li><img src="A.jpg" alt="" /></li>
<li><img src="B.jpg" alt="" /></li>
<li><img src="A.jpg" alt="" /></li>
<li><img src="B.jpg" alt="" /></li>
<li><img src="A.jpg" alt="" /></li>
<li><img src="B.jpg" alt="" /></li>
<li><img src="A.jpg" alt="" /></li>
<li><img src="B.jpg" alt="" /></li>
</ul>

ul{
height:48px;
margin-left:-11px;
list-style:none;
}

ul li{
display:inline;
float:left;
margin-left:11px;
}

お礼

ご回答ありがとうございます。感謝しています。
metametamuさんの指示を参考に記述してみたのですが、レイアウト崩れが起きてしまいました。
私の理解力がないせいだと思うのですが...
現在のHTMLとCSSの記述は上記の通りです。
もしよければご教授お願いします。