ブラウザサイズ変更でオブジェクト再配置Webサイト

質問

http://info.felissimo.jp/recommend/zakkaotameshi/?xid=p_bnm_fc_110801_GZAKKA&WT.mc_id=10455&acdate=DokMyNbOy2wL2%2F7gIQ4%3D

自分のブログをこの上記のサイトのような、ブラウザサイズを変更すると、同時にオブジェクトを配置し直すデザインにしたいのですが、このサイトは一体どのように作られているのでしょうか？

動きが滑らかなので、CSSで制御されているものではないと思うし、flashだとしたら、新しい記事を追加する度にflashを作り直さなければいけないのかな？とも思っています。（新しい記事はデータベースからphpで引っ張ってくることができるのでしょうか？）

知っている方、教えていただけますか？
よろしくお願いします。

回答No.3

ORUKA1951

＞これをブラウザサイズ変更で、それぞれのエントリが再配置されるサイトは作れないものかと考えたのですが・・・

　それはわかるのですが、肝心なのはHTMLです。ちゃんとしたHTMLなら、デザインは自由に出来ます。No.2であげた例のほかに
「ホームページ製作中ですが3カラムの体裁崩れに付いて( http://okwave.jp/qa/q6891690.html )」
　のNo.6とNo.7の回答であげているHTMLとCSSをコピーして、HTMLに書かれているサイズの適当な画像を用意して、スタイルシートの切り替え、および印刷プレビューでテストしてみてください。４種類のCSSがあるはずです。--「印刷および、一覧用」スタイルシートがウィンドウ幅に合わせて再配置されるタイプですね--

★必要なことはきちんとしたHTMLです。ボタンクリックでボタン画像を変えて、更に横に画像を - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q6913162.html )への回答(No.2)でも書きましたが、ある３種類、それ以外のもっと適切にあなたのページに適したマークアップであっても、【そのいずれであってもHTMLさえきちんと出来ていれば】「これをブラウザサイズ変更で、それぞれのエントリが再配置されるサイトは作れ」ますよ。

　メニューを右側に置くためには工夫が必要ですが、一般的な左に置くタイプでしたら簡単でしょう。

　方法自体は、「ホームページ製作中ですが3カラムの体裁崩れに付いて( http://okwave.jp/qa/q6891690.html )」の３番目のスタイルシートが参考になるでしょう。

補足

回答ありがとうございます。

自分でさらに調べたところ、ネットより「可変グリッドレイアウト」の作り方を見つけることができました。

最初は、（ハードルが高過ぎると答えが見つけられないかもしれないと思い）普通のHTMLから可変グリッドレイアウトの作り方を調べていたのですが、私の最終目的の「WordPressのブログ（言語はPHP、DBはMySQL）で可変グリッドレイアウト」まで辿り着くことができました。他の方で同じ疑問を持っている方がいるかもしれないので、ここにその方法を残しておきます。

WordPressのブログ（言語はPHP、DBはMySQL）を可変グリッドレイアウトにするには、jQueryを使用することでそれが可能になります。

可変グリッドレイアウトのjQueryプラグイン
http://blog.xlune.com/2009/09/jqueryvgrid.html

可変グリッドレイアウトのjQueryをWordPressに実装する方法
http://www.webopixel.net/web-design/238.html
（こちらのサイトのエントリの一番下の「WordPressテーマ」で紹介されているテーマ（3つのうちのどれか）をブログデザインに反映させます）

他の方の「ソースを見てみたら」という回答から、実際にフェリシモのサイトのソースを調べてjQueryが使われていることが分かり、「jQuery」というヒントのおかげで答えを見つけることができました。

回答いただいた皆さん、誠にありがとうございました☆

回答No.2

ORUKA1951

★どのようなHTMLを、あのようにプレゼンテーションしたいのですか？

　ちゃんとしたHTMLが書けていれば、ごく簡単なCSSで可能です。

　まあ、示されたサイトのHTMLは、とっても酷いもの( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )で参考にはなりませんが、たとえば、
[css]縦または横の長さを指定したい - HTML - 教えて！goo ( http://okwave.jp/qa/q6905727.html )
で、私が示したHTMLにメニューを加えるだけでよいでしょう。
　^^^^^^^^^^^^^^^^
　　　↑
Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )
で検証済み

★HTMLさえ、文書構造にしたがって正しく出来ていれば、極めて簡単なCSSでOKです。

補足

回答ありがとうございます。

オブジェクトは、データベースのエントリ（今はMySQLからWordPressでブログを作っています）です。HTMLは、PHPでMySQLから記事が書き出されたHTMLです。これをブラウザサイズ変更で、それぞれのエントリが再配置されるサイトは作れないものかと考えたのですが・・・

この質問の後、自分で調べていたらこちらのサンプルサイトを見つけました。
http://css-tricks.com/13372-seamless-responsive-photo-grid/

画像を「テキスト＆画像のブロック」に置き換えれば、それぞれのエントリを再配置するサイトができあがりそうなのですが、CSSを使うと再配置時の“動き”が希望に適うものではない（再配置時の動きに魅力がない）のです。

どうすれば自分の希望に適うものができるのか、未だに悶々と考えています。。

回答No.1

沙羅 聖児（@sara_seiji）

動きはスムーズですか？
こちらが確認したところ、とても重くて、
ブラウザサイズを変更するたびにフリーズしてしまいます。

ちなみに、JavaScriptで制御されていると思います。
制御部分を詳しく説明するのは大変ですので省略しますが、
もし気になるのでしたら、ソースを確認なさってはいかがでしょう？

補足

私のマシンでは、動きはともてスムースです。ポヨンポヨンと気持ちよくオブジェクトを再配置して面白いと思ったのですが、環境によってはとても重いサイトなのですね・・

ソースを見てみたら、JavaScriptで制御されていました。