CSSで商品を左に揃えたいです。

質問

お世話になります。
現在Wordpressで商品リストを下記のように入力して並べているのですが、更新してサイトを表示させると添付いたしました画像のように並べる数が4つ満たない列は黒色のように並んでしまいます。これを赤色のように左に揃えたいのですが、どのようにすればよろしいのでしょうか？

入力したのは4つのときは<table><tr><td>●</td><td>▲</td><td>■</td><td>★</td></tr></table>で2つのときは<table><tr><td>●</td><td>▲</td></tr></table>と単純にやっているのですが…。素人の質問で申し訳ありませんがよろしくお願いいたします。

回答No.2

ORUKA1951 · ベストアンサー

No.1です。
＞サイズや色などの種類の数が違う為に並べるときの数にも違いが出てくる
　ということは、
「商品リスト」「種類が違う物がある」
　から、HTMLは２階層のリストとしてマークアップすることになりますね。どのようにプレゼンテーションするかはHTMLを書くときは、一切気にしない・・・くらいの気持ちで。
★「1列目】_靴下A_1赤色_2白色_3黄色_4緑色、【2列目】靴下B_1赤色_2白色、【3列目】靴下C_1赤色_2白色_3黄色…のように商品によって」
ですから、率直に
<div class="productList">
<!-- 商品リストを示す要素なんてないのでclassを併用したdiv要素でマークアップします。-->
＿<ol><!-- 序列リストにしておきます -->
＿＿<li>靴下A
＿＿＿<ol>
＿＿＿＿<li>赤色</li>
＿＿＿＿<li>白色</li>
＿＿＿＿<li>黄色</li>
＿＿＿＿<li>緑</li>
＿＿＿</ol>
＿＿</li>
＿＿<li>靴下B
＿＿＿<ol>
＿＿＿＿<li>赤色</li>
＿＿＿＿<li>白色</li>
＿＿＿</ol>
＿＿</li>
＿＿<li>靴下C
＿＿＿<ol>
＿＿＿＿<li>赤色</li>
＿＿＿＿<li>白色</li>
＿＿＿＿<li>黄色</li>
＿＿＿</ol>
＿＿</li>
＿</ol>
</div>
だとして
div.productList{width:648px;border:solid 1px gray;}
div.productList ol,productList ol li{list-style:none;margin:0;padding:0;}
div.productList ol li ol{margin-left:40px;}
div.productList ol li ol li{width:150px;height:150px;float:left;border:solid 1px; gray;}
div.productList ol li ol:after{content:"";display:block;clear:left;}

とか・・・
もっと増えたら２段になる。

お礼

返事が遅くなってすみません。教えていただいたコードでさえも自分のスキルでは難解で1つ1つ調べおりましたので時間がかかってしまいました。おかげさまで希望の形にすることができました。作り方には複数の方法があることを知り大変勉強になりました。今後の制作にも活かしていきたいと思います。ありがとうございました。

回答No.1

ORUKA1951

商品リストなのに、なぜtableでマークアップされているのですか？
商品リストでしたらリストでマークアップしましょう。
『非視覚系メディアでのレンダリングに際して問題を起こすことがあるため、単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )』

また、
■■■■
■■■
■■■■
■■
のように表示する理由はなんでしょう。
■■■■
■■■■
■■■■
■
でなく。
　４行がそれぞれカテゴリーが異なるのでしたら
<ul>
　<li>
　　<ul>
　　　<li>■</li>
　　　<li>■</li>
　　　<li>■</li>
　　　<li>■</li>
　　</ul>
　</li>
　<li>
　　<ul>
　　　<li>■</li>
　　　<li>■</li>
　　　<li>■</li>
　　</ul>
　</li>
　<li>
　　<ul>
　　　<li>■</li>
　　　<li>■</li>
　　　<li>■</li>
　　　<li>■</li>
　　</ul>
　</li>
　<li>
　　<ul>
　　　<li>■</li>
　　　<li>■</li>
　　</ul>
　</li>
</ul>
のようにマークアップされるはずです。

補足

補足です。
横に2つや3つしか並ばないのが存在する理由といたしまして、例えば靴下の商品を並べるときに【1列目】_靴下A_1赤色_2白色_3黄色_4緑色、【2列目】靴下B_1赤色_2白色、【3列目】靴下C_1赤色_2白色_3黄色…のように商品によってサイズや色などの種類の数が違う為に並べるときの数にも違いが出てくるのです。このあたりも素人のレイアウトセンスが災いしているのかもしれませんが…tableを使ってしまったのも横に並べる方法を調べましたらこのようにすると書いてあったのに飛びついてしまっただけで深い理由はありません。商品を横に並べていく方法で教えていただけると嬉しいです。説明不足ですみませんがよろしくお願いいたします。