こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

cssで商品を並べる時、テーブルを使わないでできる?

cssとっかかったばかりの初心者ですのでわけのわからない質問ばかりしてしまいますが、よろしくお願いします。

cssを使ったページに商品を並べる場合、テーブルを使ってレイアウトするのが楽と思いますが、テーブルを使わないで2列、3列というようにできますか?

普通にテーブルを使ったら
<table>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td><img src="img/01.jpg" width="100" height="100"></td>
<td><img src="img/02.jpg" width="100" height="100"></td>
<td><img src="img/03.jpg" width="100" height="100"></td>
</tr>
</table>

ですが、テーブルタグをつかわず、cssで列を指定ってできますか?

それとも、商品ラインナップの場合はテーブルで入れるのが普通ですか???

いろいろやってみたんですが、わからなくなったので、質問します。
よろしくお願いします。

投稿日時 - 2005-02-18 14:29:39

QNo.1224959

すぐに回答ほしいです

質問者が選んだベストアンサー

#1です。
結局、TABLEタグ使うのが楽です。使っちゃダメって訳では無いし(現時点では)、殆どのブラウザで対応していますから。

で、その場合のソースですが、
 <td><div class="item">~</div></td>
とした場合は枠線が<td>の枠と<div>の枠で二重に表示されますよね。その辺りは適宜修正を加えてください。


また、CSS未対応ブラウザに対応させる為に、<table width="~" border="~" class="~">という様に、CSS未対応のブラウザの為に要素の指定も必要です。

投稿日時 - 2005-02-19 10:17:26

ANo.3

このQ&Aは役に立ちましたか?

5人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.4

No2について

> リストは普通縦表示ですよね?
単純に
<ul>
<li>item <img ></li>
<li>item <img ></li>

のように並べてもいいかなと。
桁あわせをしたければ<span>等も使ってCSSで揃える手法もあります。
興味があれば「CSS 段組」で検索してみるとサンプルが見つかると思います。


> また、先に「#content #main ul」「#content #main ul li」で、リストのポイントを指定してしまった場合、新しく「ul」「li」を指定するにはどうしたらいいですか?

すいません、ここは理解できませんでした。

投稿日時 - 2005-02-20 15:58:20

お礼

sandybrownさん、意味不明なことを聞いてすみませんでした。

なんとかやれそうです。
ありがとうございました。

投稿日時 - 2005-02-26 23:48:31

ANo.2

> 商品ラインナップの場合はテーブルで入れるのが普通ですか

「表」だなと、思えば「table」にするのが妥当です。「表」を表現するための「table」だし。
一覧であればリストの類(olやul、場合によってはdl)でもいいかも。

そのうえで、スタイルを当てるのに必要ならばdivやspanのような意味を持たない要素を追加したりします。

投稿日時 - 2005-02-19 09:41:37

補足

リストは普通縦表示ですよね?
横に並べたい場合のタグはありますか?

また、先に「#content #main ul」「#content #main ul li」で、リストのポイントを指定してしまった場合、新しく「ul」「li」を指定するにはどうしたらいいですか?

(入れる場所は 「#content #main 」の中なんです。。。)

言ってることが意味不明かも…。
かなりの混乱です。

投稿日時 - 2005-02-19 13:19:35

ANo.1

.cell{
background-color:#ccffff;
border:1px solid #333333;
padding: 5px;
float:left;
display:table-cell;
}

1行目で背景を
2行目で枠線を
3行目でパディングを
4行目で、回り込む事の宣言を
5行目で、ブロックレベルのタグをセルとして扱う事を
それぞれ指定します。

<div class="cell">
<h1>item1</h1>
<img src="img/01.jpg" width="100" height="100">
</div>
<div class="cell">
<h1>item2</h1>
<img src="img/02.jpg" width="100" height="100">
</div>
<div class="cell">
<h1>item3</h1>
<img src="img/03.jpg" width="100" height="100">
</div>

これで、テーブルと同一の表示が出来ますが、次の点にご注意下さい。

1)CSS2に対応していないブラウザでは、実現出来ない。(これは、結局テーブルタグとの併用で解決するしかない)

2)画面サイズを狭めると、自動的に下に回りこんでしまう。(必ずしも横に並ぶ訳では無い)これは、他にも幾つかの指定をする事で解決出来るけど、ソースが汚くなるし更新の度に細かい修正が必要になる。

3)CSSを使う事が推奨されているが、現実問題としてその様にしているサイトは皆無。(通常は、テーブルタグと併用して利用する)

投稿日時 - 2005-02-18 15:54:49

補足

sion_fsさん、ありがとうございます。

では、テーブルタグを使ってもOKということでしょうか?

えっと、テーブルを使って、その中で指定しようかと思ったんですが、そういうのでもいいでしょうか?

.table{
border-collapse: collapse;
width: 500px;
margin-top: 20px;
}


.item {
position:relative;
width: 215px;
border: 1px #999999 solid;
font-size:95%;
text-align: left;
padding: 10px 10px;
height: 380px;
}

タグを書く時は

<table class="table">
<tr>
<td><div class="item">
<h3>item1</h3>
<p><img src="img/01.jpg" width="100" height="100" class="contentImgL" />item1
</p>
</div> </td>
<td><div class="item"><h3>item2</h3>
<p><img src="img/02.jpg" width="100" height="100" class="contentImgL" />item2</p>
</div> </td>
</tr>
<tr>
<td><div class="item"><h3>item3</h3>
<p><img src="img/03.jpg" width="100" height="100" class="contentImgL" />item3</p>
</div> </td>
<td><div class="item"><h3>item4</h3>
<p><img src="img/04.jpg" width="100" height="100" class="contentImgL" />item4</p>
</div> </td>
</tr>
</table>

にしたらどーだろう!???とか考えていたのですが、これじゃまずいでしょうか?

投稿日時 - 2005-02-18 16:35:43

お礼

sion_fsさん、いろいろありがとうございました。
できる範囲でやることにします。

とりあえず、テーブルを使ってみます。
わからなかったらまた教えてください。

投稿日時 - 2005-02-26 23:46:26

あなたにオススメの質問