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

締切済

質問者：cipherling
質問日時：2011/08/01 16:17
回答数：3件

http://info.felissimo.jp/recommend/zakkaotameshi …

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

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

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： ORUKA1951
回答日時：2011/08/02 14:41

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

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

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

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

　方法自体は、「ホームページ製作中ですが3カラムの体裁崩れに付いて( http://oshiete.goo.ne.jp/qa/6891690.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」というヒントのおかげで答えを見つけることができました。

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

補足日時：2011/08/03 16:21

通報する

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2011/08/01 19:30

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

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

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

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

この回答への補足

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

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

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

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

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

補足日時：2011/08/02 13:05

通報する