リストタグに入れることのできるタグはないですか？

現在お店のHPで、メニュー表を作っています。
<div class="box1">
<ul>
<li class="box2">商品1</li><span class="box3">値段1</span>
<li class="box2">商品2</li><span class="box3">値段2</span>
<li class="box2">商品3</li><span class="box3">値段3</span>
<li class="box2">商品4</li><span class="box3">値段4</span>
</ul>
<div>
という感じでHTMLを書いています。
　ですが、聞くところによると<ul>には<span>を入れてはいけないとのこと・・・
　商品と値段は別々のボックスに入れて横に並べたいので、できれば違った要素で囲みたいのですが、可能でしょうか？
　できなければリストタグは使わずに行こうとおもいますが、なんとかなればしたいとおもいます。
よろしくお願いします。

No.1 ベストアンサー 回答者： asha00 回答日時： 2006/06/09 00:51

こんばんは～。

的はずれでしたらすみません。
単純に別々のdivに入れて、回り込みで並べて表示ではまずいですか？

------------------------------------------------
【CSS】
div.hidari {
float:right;
}
div.migi {
float:left;
}
------------------------------------------------
【HTML】
<div class="hidari">
<ul>
<li class="box2">商品1</li>
<li class="box2">商品2</li>
<li class="box2">商品3</li>
<li class="box2">商品4</li>
</ul>
<div>
<div class="migi">
<span class="box3">値段1</span>
<span class="box3">値段2</span>
<span class="box3">値段3</span>
<span class="box3">値段4</span>
</div>
------------------------------------------------

この回答へのお礼

なるほど～！これは思いつきませんでした。
ちょっと難しそうですが、やってみようとおもいます。
他にもいい案がありましたらよろしくお願いします。

お礼日時：2006/06/09 01:33

No.4 回答者： partita 回答日時： 2006/06/09 13:53

「テーブルを使用してはいけない」というルールはありません。

レイアウトにテーブルを使用するのは推奨されない、というだけで、本来の「表」としての役割ならば、むしろテーブルを使用するべきです。提示されている内容は、価格「表」ですよね。


表示が遅いのは、一般的にレイアウトにテーブルを使用していたり、テーブルを何重にも入れ子にしたりする場合です。サーチエンジンに不利だとも思いません。

アドバイスですが、table、tr、tdのほかに、thやcolgroupなども使用するといいでしょう。

No.3 回答者： koutarou504 回答日時： 2006/06/09 03:44

意図によって異なってきますが・・・。

商品1と値段1がどの様な関連付けを意図しているのか？

<div class="box1">
<ul>
<li class="box2">商品1<span class="box3">値段1</span></li>
<li class="box2">商品2<span class="box3">値段2</span></li>
<li class="box2">商品3<span class="box3">値段3</span></li>
<li class="box2">商品4<span class="box3">値段4</span></li>
</ul>
<div>

上記の様に UL の直下を LI だけにすれば（規則的には）良いので・・・。

後は、それぞれの意味と CSS を用いるなら各ブラウザの振る舞いなどへの配慮をどうするか・・・。


尚、表と意図しているなら TABLE を用いるのが（意図的には）正しいです。

ただ、現実問題として、誰にどの様に見せたいのかが重要で、それによっては CSS の使用回避とかいろいろ出てくるので要注意・・・。

この回答へのお礼

ふむふむ。。これだと商品と値段を分けてボーダーで囲えないですよね？
商品と値段を分けてボーダーで囲いたいのです。

お礼日時：2006/06/10 15:51

No.2 回答者： steel_gray 回答日時： 2006/06/09 01:36

単純に商品と価格の一覧表であれば、tableを使うべきだと思います。

（あるいはdl+dt、dd）
どうしたい、ではなく、何であるか、でどのような要素(タグ)を使うか決めるのが本筋です。

この回答へのお礼

なるほど～、、やっぱりテーブル使うのがいいんでしょうか？
テーブルを使うと表示が遅くなったり、サーチエンジンに不利になるという話を聞いてCSSを使って作ることを考えてました。

お礼日時：2006/06/09 09:04