ログインしてさらにmixiを楽しもう

コメントを投稿して情報交換!
更新通知を受け取って、最新情報をゲット!

ホーム > コミュニティ > PC、インターネット > CSSテクニック > トピック一覧 > 商品画像掲載のページ構成css...

CSSテクニックコミュの商品画像掲載のページ構成css or table?

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

コミュ内全体

いつもコミュにお世話になっております。
以下の件で、皆様のアドバイスを頂けると嬉しいです。

■商品画像掲載ページの構成について

添付している画像を参考に、
各ページに商品カテゴリがあり、そこから詳細ページへ・・・
って感じのサイトあると思います。

●ご質問1:

画像やテキストの生成コーディングですが

・TABLEで組まれますか?
・TABLE以外でコーディング?

注:
以前から、脱テーブルと言われ、色々と議論をコミュ内でもありましたが
最終的に私は、皆様のご意見を見て、どちらも適材適所と考えるようになりましたので、議論ではなく、その上で・・・皆様、その後

どうやってこういう場合、組まれているのか?お聞きしたく思います。


●質問2:

TABLE以外でコーディングの場合、どんな感じになりますでしょうか?
もし宜しければ、簡単にお書き頂けると嬉しいです。

出来れば、あまりdivdivしたくないので、綺麗なコーディングを
心掛けたく、皆様のご意見お願い致します。

以上、お暇な時で結構ですので、アドバイスお願い致します〜。


コメント(19)

箱の大きさが全て常に同じにできるなら float。
これだと、どこの商品を消しても自動で詰めてくれるし。

ただ、物によって文字が増えて縦幅が変わるようだと、table で作っちゃうかも。

いずれにしても、商品数が多くなってきたら、Access とか使って、DB に商品情報を登録しておいて、VBA を使ってボタン一発で html を出力ってのが楽かな……。


<style type="text/css">
<!--
*{margin:0; padding:0;}
a img{border:none;}
#goods{width:600px; margin:10px; font-size:16px;}
h3{margin:1em 10px; padding:0 .5em; border-left:4px solid brown;}
ul li{float:left; text-align:center; padding-top:1em;}
ul li dl{width:120px;}
ul li dl a{text-decoration:none; color:black;}
ul li dl dt{margin:5px 10px; font-size:90%;}
ul li dl dd img{width:100px; height:100px;}
-->
</style>

<div id="goods">
<h3>nahahaグッズのご紹介</h3>
<ul>
<li><dl><dd><a href="#"><img src="" alt="商品画像" /></a></dd>
    <dt><a href="#">ピアス100円</a></dt>
 </dl></li>
<li><dl><dd><a href="#"><img src="" alt="商品画像" /></a></dd>
    <dt><a href="#">ピアス100円</a></dt>
 </dl></li>
<li><dl><dd><a href="#"><img src="" alt="商品画像" /></a></dd>
    <dt><a href="#">ピアス100円</a></dt>
 </dl></li>
<li><dl><dd><a href="#"><img src="" alt="商品画像" /></a></dd>
    <dt><a href="#">ピアス100円</a></dt>
 </dl></li>
<li><dl><dd><a href="#"><img src="" alt="商品画像" /></a></dd>
    <dt><a href="#">ピアス100円</a></dt>
 </dl></li>
</ul>
</div>

リストでフロートなら基本こんな感じ?
#似せるために余計なスタイルあるし、余白はテキトーですが。。。

すでに指摘されてますが、テキスト部分が増えたときにどうするか、ですね。

リストで組んで、display:table;、display:table-cell;を使うなんてアコギな手もありますが。。。f(^^;
皆様、アドバイス有難うございます。

TSUJIMO様>>

確かにその方法が一番かな〜っと想ってたんですが、
テキストが多い場合に、問題が起こってしまうのが、肝ですね。。。
ん〜どうしよ。


拳骨斎様>>

確かにデータベースなりを経由しての方が、簡単ですが
今回は、データベース当を使わない方法で考えております。
でも、教えていただいた方法は、確かに今後、運営していく中で
必須に思えてきました。


モモンガ@365様>>

URLまで添付して頂き、有難うゴザイマス。
私も今までこの様な場合は、そこだけTABLEで組んでたのですが、
CSSでのレイアウト構成の方が好きなんで、考えておりました。

ご参考にさせて頂きます。


ginnez様>>

うぉっとタグまでお打ち頂き、有難うゴザイマス。
こういう形がベストな気がしますね。

但し、言われるように、テキストが増えた時に
困った現象があり、ん〜ん〜

やはり、TABLEか?なんて、ん〜


CSSで組む場合、
ginnez様にお書き頂いた形式が多いと思われます。

私も以前同じように作成したこともあるんですが、

・テキストが増えた時の問題
・CSSの場合、タグ入れ子が多いので、TABLEの方がすっきりしてる?

などなど、考えると、どちらがSEO的にもいいのかな〜っと。
ん〜悩む。
ulでliの中にdlもしくは、hn・pの組合せにします。
内容によって高さが揉める場合には、最近では以下のJSで解決しています。
http://blog.webcreativepark.net/2007/07/26-010338.html
SEO的に、でいうと、
テーブルレイアウトにしたからといって、SEOの効果が劇的に下がるということでもありません。

例えばヤフーで「家具」で検索して1位にくるのが「KAGOO」というサイト、
商品ページはテーブルレイアウトです。
http://www.kagoo-livingroom.com/

グーグルの場合は「ヒマラヤネット」というサイトですが、
こちらもテーブルレイアウトです。
http://www.himalayanet.co.jp/


個人的にはなにもCSSにこだわり過ぎなくても良いと思います。
大事なのはお客様がきちんと商品を閲覧できて、購入ができるかどうかです。
>>ダイさん
ginnezさんの書かれているようなタグであれば、「理論的なタグ構造」になっているので、入れ子とはちょっと違うのではないでしょうか。(必要な入れ子構造とでも言うべき?)

純粋にデザインのためだけに使われているタグではないので、すっきりするからとtableタグを使うのは違うかなと思いました。

テキスト増大の対策として、テキスト部分にはoverflow: auto;を追加して、テキスト量が増えてしまってもスクロールで対処する、というのはどうでしょうか?

ところどころスクロールバーのある・なしが出ちゃいますが、こんな方法でもいいのかなーと思ったので書き込みました。
皆様、アドバイスありがとうございます。

コバ様>>

JSって凄いですね!
今までほぼ、CSSでまかなって来てたのですが、こういった使い方も
出来るんですね!勉強させて頂きます!


kiminy様>>

確かにヤフーなどで調査してると、商品などを販売されてるページは
テーブル構成のサイトがまだまだ多い気がします。
確かに、ユーザーが使いやすいと思える方法を取るのが一番ですね。

もう一度、その辺をつめて考えたいと思います。


えど様>>

確かに入れ子では、表現的にorz..
私の言い方に語弊があり、ご訂正ありがとうございます!

スクロールか〜その考えは、今までなかった!
確かにそれで、ユーザーが使いやすければ、してみるのも良いですね。


ほんと、ご質問させて頂くと、見えなかった部分を考察したり出来るので
大変勉強になります!
皆様多くのご意見ありがとうございます!

>文字が多いときの処理
スクリプトとデータベース等を使ってオンザフライで組み上げる、とかでなければ、文字量は制作時にだいたいわかるので、一番多い文字数に高さを合わせちゃうのが手っ取り早いですね。

あと、今回の件で適切かどうかわかりませんが、overflow:hidden;にして問答無用でぶった切っちゃうとか。。。f(^^;

1行ごとにリストを閉じてクリアするのも手かな。
たとえテーブル使ったって文字量の多い行だけ高さが広くなっちゃうのは変わらないですから。

まぁ今回の場合はまさに「表」なので、テーブルでもいいと思いますが。
でもtdのなかにdl入れるんなら(ぼくならそうします)ソースの煩雑さは変わらないと思いますけど。

「脱テーブル」云々の話は関係ないと思いますよ。「CSSかテーブルか」という立て方もヘンだし。。。

ただ個人的にはテーブルはキライですf(^^;。
将来的にリキッドレイアウトにしたくなったときにメンドクサイとか。
並び順を変えたり、「縦横の並びを逆にしてよ」とか言われたらヤダとか。
colspanやらrowspanやら使ってるとわけわからなくなるとか。。。

テーブル使うならtable-layoutをfixedにして各セル幅を指定してやるといいかも。

長くなってスンマセン。。。
Kojiです★
意見の前に誤解を招かないよう言っておきますがコーディングは(X)HTML+CSSです。

「脱テーブル」についてですがテーブルタグの本質的な意味は「表組み」です。
tableであろうとliであろうと、適したタグを使用すべきです。
テーブルレイアウトは現在のWebの流行からするとデメリットが多いですが、それで制作をするのが「悪」という扱いは良くないのかなと思います。

また今回の件に関しては、自分の場合はどちらかというと表組みに近いと判断します。

コーディングなどの作業はクライアントまたは閲覧者が関与できない「無知な領域」ですのでWebデザイナープログラマーの個々のノウハウにより記述が違うと思うので一概にこれが正しいという答えが無い気がします。
overflow制御は個人的にはやめたほうがいいと思う。
あくまで商品のリストであるなら、
キャチコピーが切れるとか、
スクロールしなきゃ見れないとか、確実にNG。
実際問題、ページ内の小さなブロックのスクロールなんて、ほとんどの人は中見ないし。

なので、文章を強制的にカットするのもNG。
カットするくらいなら、文字数の最大値を決めておいて、
その範囲内に収まるように文章を作るほうがまし。


マーケティング寄りの話しですが。。


とは言え、商品の種類にもよる。
洋服とかだったら、画像命だし、
PCソフトとかはテキストだし(パッケージ画像並べられてもね)


主旨から外れてるけど、気にしないで。
皆様、多くのアドバイス有難うございます。


ginnez様>>

>>「脱テーブル」云々の話は関係ないと思いますよ。「CSSかテーブルか」という立て方もヘンだし。。。

申し訳ございません。
私もそこに終点をおきたかったのではなく、説明べたで・・・
要するに、この場合皆さんならどう、コーディングされますか?っと
お聞きすればよかったですね。

>ただ個人的にはテーブルはキライですf(^^;。

実は、私もですw
基本xhmtl+CSSでテーブルは、たまに使うくらいです。
でも、この場合は、テーブルの方がいいのかなって思って
皆様にお聞きした次第でございます。

でも、色んなアドバイスを頂き、凄く色んな事を考えました。
有難うございます。


TSUJIMO様>>

JSは、ちと弱いので勉強してみます。
基本、JS無しで乗り切ってきてるので・・・でもJSで来たら
幅広がりそうですね。 有難うございます。


Koji様>>

すいません。私の書き方に問題がありました。
基本的に私は、どちらがアカンとも思っておりません。
ん〜言葉って難しいですね。

皆様、ほんと申し訳ないです。

先ほども書きましたが、この場合どうやってコーディングされるか?
お聞きしたかったので、それだけ書けばよかったですね。
実際、今ページ構成をXHTML+CSS(TABLE以外で)コーディングして
あと、ページの中の商品部分のコーディングだけを残して止まってたので。

でもこの場合、TABLEの方が良いのかな?っと疑問に思ったので、
皆様にお聞きさせて頂きました。

大変、ご意見勉強になりました。有難うございます。


TSUJIMO様>>

多分、多くのカテゴリページ(上記のような画像の様なページが沢山存在する)の場合は、TABLE以外でした方が、後々管理しやすそうですね。

管理側と構造とSEOと・・・などと考えると
答えが見つかりません状態に陥ってました。

大切な事は、なぜこれが必要なのか?お客様が使いやすいか?
見やすいか?って事ですよね。有難うございます。


すろ様>>

今回、バッグ商品のサイトを作成しております。
なので、なるべく商品画像をハイライトして、テキストは
商品名+価格のみ掲載予定です。

ちなみに、商品画像を出した場合、TOPページなどで
私は商品名と価格を掲載しようと思ってるのですが、
他にもユーザー側に必要な情報とかあれば、アドバイス頂けると
嬉しいです。

また、商品名だけにして、価格は各詳細ページに行ってからの方が
良いのか?たまにこういうページも見かけるので。
いろんな作り手側の思惑がありそうですね。


飴様>>

ご意見有難うございます。
スクロールの件も掲載するもの、レイアウト構成によりそうですね。
実際スクロールあったほうが便利な場合もあるし、その反対もありそうです。
でも、こういう考え方無かったので、凄く参考になりました。


皆様、ほんと多くのご意見有難うございます。
今まで独学でってか、周りに業界人がいなくて、一人でやってきてるので
ご意見・アドバイス頂きまして、大変勉強になりました。

有難うございます。
>多くのカテゴリページ(上記のような画像の様なページが沢山存在する)の場合は、TABLE以外でした方が、後々管理しやすそうですね。

うーんと、そういう場合は、静的な(x)htmlファイルにせず
サーバーサイド(jsp,asp,perl,php,ruby等々)のほうで書いたほうが楽と思います(DB使った形で)。
修正対象部分が1ファイルで済むし(作り方によるけど)、コード量も少なくて済む。
(tableから他のに変えるのも容易になります)

>今回、バッグ商品のサイトを作成しております。
>なので、なるべく商品画像をハイライトして、テキストは
>商品名+価格のみ掲載予定です。

>また、商品名だけにして、価格は各詳細ページに行ってからの方が良いのか?

掲載する内容の選別は難しいですねぇ。
運用フェーズで、ユーザートラッキング(アクセス解析等)で研究していく以外道はないかと。。。
こういったものは、一旦作ってそれでOKとはいかないです。
なので、変更がしやすいように作る必要はあります。


でも、こういう内容の選別とか、ある程度の見せ方は
マーケティング部門の人から要望があるはずで、、、
受託開発なら、確実に要望として挙がってるはず。
挙がってなければ、逆に聞き出すのも仕事のうちかと。


価格が併記してあることで、
(ユーザーの頭の中で)画像を見るとほぼ同時に、財布との相談ということが発生してしまうから、
詳細ページへ行く率が若干減る。
(詳細ページのほうは、大概商品に特化したページになるので、そこに誘導したほうが
購入数増えるとか)

でも、価格が最初から出てたほうが
ユーザー側としては、価格を見るのに無駄なアクションが減るから好ましいとか。

全てにおいて一長一短です。
正解は存在しない世界です。
売り手の思惑と買い手の思惑のバランスを。。
(基本は買い手のことだけ考えればいいのだけれど、そうもいかない場合が往々にしてある)


一人で全てを考えて作るなら、上に書いたような内容も考える必要あるけど、
コーディングをするだけなら、こんなこと考える必要ないです。
(デザインも考えるなら、UIデザインとして、どこにボタンを置いたほうがいいのかとか研究する必要ありますけど)


余談ですが、アイトラッキングを利用してみると面白いと思います。
(利用したいが、利用できない自分・・・許可おりないorz

CNETか@ITかどっちの記事だか忘れましたけど、アイトラッキングを利用した調査が載ってて、
ITリテラシーの低い(普段ネットサーフィンをあまりしない人)は視線が局所的で、全体を見渡せないらしいです(つまり、認識されないコンテンツが多い)。
被験者が3人くらいしかいなかった気がするので、話半分に。

アイトラッキングについては、業者じゃないのでURLは載せません。
検索してみてください><


脱線しすぎですね・・・すみません。長文失礼
趣味で勉強しているものです。最近全てがスランプでネットショッピングで現実逃避しています(;^_^A
で、服飾関係を一番見ているんですが…

>商品画像を出した場合、TOPページなどで
>私は商品名と価格を掲載しようと思ってるのですが、
>他にもユーザー側に必要な情報とかあれば、アドバイス頂けると
>嬉しいです。

価格はやはり一覧で出してもらえると嬉しいです。
ぱっと見好みの商品と思っても、やはり予算オーバーだと候補からははずれるんですよね。なので、出来るだけ早い段階で価格がわかった方が時間を節約できて有り難いです。
あとはカラーバリエーションはあるのかも商品一覧でわかるといいかな。これは画像担当の方の範疇かもしれませんが…。
すろ様>>

ご返事有難うございます。
私の場合、今php等勉強しており、まだまだ使い物にならないので、
もっと勉強して、動的生成も今後考えて生きたいと思います。

さて、
>>全てにおいて一長一短です。

確かに、そうですよね。
こればっかりは、難しそうですね。
ちょっと、話しがずれてしまいましたが、

私の場合、全て私が企画・コーディング〜更新まで
受けておりますので、今回悩んでおりました。

静的ページ制作やデザイン・企画は、基本出来るので問題ないのですが
やはり、こういった問題やどうしようっと悩んだ時に
周りにいろんな専門分野が居ると心強いですね。

アイトラッキングは、以前拝見しました。
ありそでなかったサービスですね。私の場合、もっぱら
友達や彼女に聞いて、判断してましたが、やはり第3者の目は
必要ですね。

色々とアドバイス有難うございました。


姫様>>

ユーザー視点のお声有難うございます。
大変参考になりました。

ユーザーの方の知りたい情報は、人それぞれだと思いますが、
飽きさせない、他のページも見たいと思うサイト構成が必要な事。
もう一度、考えました。


■皆様多くのアドバイス有難うございます。

大変勉強になりました。
ある程度、自分の中で構成が固まってきました。
自分で悩む事も大事ですが、お聞きさせて頂き、色んな意味で

考え方の枠が広がったと思います。
皆様、本当に有難うございました。

ログインすると、残り5件のコメントが見れるよ

mixiユーザー
ログインしてコメントしよう!

CSSテクニック 更新情報

CSSテクニックのメンバーはこんなコミュニティにも参加しています

星印の数は、共通して参加しているメンバーが多いほど増えます。

人気コミュニティランキング

mixiチケット決済