ECサイトなどにある並び替えについて

質問

現在ECサイトのスマートフォン化を行っています。

最近のECサイトでよく見る、商品一覧を表示した際に1カラム→3カラム表示など表示切り替えボタンがついているのですが、
実装するにあたっておすすめのjsや、実装方法が記載されているURLなどご存知の方がいたら教えてもらえませんか。

※Android2.3以上対応のものであれば助かります

よろしくおねがいします。

回答No.1

ORUKA1951 · ベストアンサー

基本的にはfloatで並べてしまうのが最も簡便で適切だと思います。
　⇒DMM.com [アクション] 単品DVDレンタル( http://www.dmm.com/rental/ppr/-/list/=/article=keyword/id=71002/ )
　こんな感じで・・

　そもそもHTMLは、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
　HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。 もし【相互運用性確保の】努力が成されなければ、Webは互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう、大きなリスクを負うこととなる。
・・・【中略】・・・
　HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

　なのですからね。

＞表示切り替えボタンがついているのですが、
　そうではなく、mediaqueryを使用して、ウィンドウ幅によってスタイルシートを変えるほうが良いです。
<link rel="stylesheet" media="screen href="standard.css">
<link rel="stylesheet" media="screen and (max-width: 640px)" href="mobile.css">

お礼

お返事遅くなりました。

＞HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針
確かに考え直すきっかけになりました。

mediaqueryを使用し、様々なデバイス対応できる設計にすることにしました。

ありがとうございました！

回答No.3

noname#206842

普通にコーディングするなら、Mediaqueryを、使うのでは？？？
閲覧者に無駄な操作をさせる必要がないとおもえるが？・・・
ユーザビリティを考えると、閲覧者の環境に自動対応しないと、意味がないのでは？・・・

お礼

お返事おそくなりました。

＞閲覧者の環境に自動対応
そうですね。いろいろな環境からアクセスし目的を達成するためのツールとして利便性があるとおもったのですが、根本がなければ便利なツールも面倒なツールとなってしまいますよね。

考える良い機会でした。ありがとうございます！

回答No.2

神崎 渉瑠（@taloo）

http://joshinweb.jp/season/358/?LVT=0&SRT=2
http://joshinweb.jp/season/358/?SRT=2

上新電機の場合は、HTMLを変えています。

基本的にテーブルレイアウトですが、
1列表示なら、

<tr><td>商品情報1</td></tr>
<tr><td>商品情報2</td></tr>
<tr><td>商品情報3</td></tr>

２列表示なら

<tr><td>商品情報1</td><td>商品情報2</td></tr>
<tr><td>商品情報3</td><td>商品情報4</td></tr>
<tr><td>商品情報5</td><td>商品情報6</td></tr>

HTMLを書き換えればいいので、JavaScriptは一切不要です。

お礼

お返事遅くなりました。

アナログ的ですが、直線的な設計でそれはそれでよさげですね。

アドバイスありがとうございました！