商品画像掲載のページ構成CSS

このエントリーをはてなブックマークに追加

ネタ元:商品画像掲載のページ構成css or table?

なかなか語られることのない、Web制作の問題点が議論されています。

この問題はheightLine.jsを使ったり、tableで組むことで解決できるのですが、なんかそれをやると負けた気がする人がいるのも理解できます。

ですので、私が最近使っている方法を紹介。

サンプル

コードに関してはサンプルから参照してください。

行ごとにブロックレベル要素で包み、その要素(サンプルではul要素)に対して、商品のリスト表示に使っている要素(サンプルではli要素)にかかっている物とおなじfloatプロパティを適用します。

副産物として、行ごとにブロックレベル要素で包んでいるのでclassを適用することにより背景色を変更することができます。

このマークアップも好みが分かれる所だと思いますが参考までに

関連エントリー

高さの異なるカラムをそろえるスタイルシート
CSSでロールオーバーもどき
CSSで実現するスマートなロールオーバー
BIR-もうひとつの画像置換
tableの膨張を防ぐ【css tips】

スポンサードリンク

«Mac始めました-AirMacとAOSSを接続する方法- | メイン | ブックマーク数付きリンクが簡単に作れるブックマークレット»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/1143
コメント

> このマークアップも好みが分かれる所だと思いますが参考までに

各liのなかにdlで、dtとddがワンセットしかない、
というマークアップは、構文的にはまったく問題なしですが、
マークアップポリシーとして違和感を覚える人がいるかもしれませんね。

dlはあくまで「リスト」であり、
複数の項目をマークアップするのにつかうのがスジだ、と考えれば、
dtとddは複数セット出てくるのが自然、という考え方ですね。

個人的には、各liのなかではシンプルにpで展開するのがよいかな、
と思っています。

投稿者:益子 | 2007年12月14日 12:03

>益子さん

コメントありがとうございます。

たしかに、この場合はpのほうが良さそうですね。サンプルという性質から考えても、中身がややこしいと良くないですね。

というわけで、pのほうに直しました。

また何かありましたら、よろしくお願いいたします。

投稿者:西畑一馬 | 2007年12月15日 01:44

CSSTIPS~アルファ画像を表示する
http://css.webcreativepark.net/tips3/

上のページでスターハックを使用した透過PNGの表示のさせ方が説明されていましたが、
指示通りに編集しても実装できませんでした。

IEと透過PNG
http://amenti.usamimi.info/ie6png.html

上のサイトで「画像のサイズ指定は必須」とありましたが、
CSSTIPSのページでは書かれていませんでした。
実際はどうなんですか?

まぁ、それでも実装できなかったのですが…
結局、透過GIFをつくり実装することになったのですが、
JPG、GIF、PNGの使い分けってどう判断していますか?
アドバイスをお願いします。

投稿者:通りすがり | 2007年12月15日 19:48

>通りすがりさん

ちなみにスタンドアローン版のIEなどのDirect Xなどのが動作しない環境では利用できません。

そうでないのでしたら、やり方を間違えているか、pngの作り方がおかしいのではないかなと思います。

背景画像を利用しているためボックスのサイズ指定は必要です。CSS TIPSのほうでは最初のセレクタで指定しています。

JPG、GIF、PNGの使い分けですが写真などはjpg、画像はgif、アルファチャンネルを利用する場合はpngなどかなと思います。

参考になればと

投稿者:西畑一馬 | 2007年12月16日 16:45
コメントを投稿