• 締切済み
  • 困ってます

ブラウザサイズ変更でオブジェクト再配置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で引っ張ってくることができるのでしょうか?) 知っている方、教えていただけますか? よろしくお願いします。

共感・応援の気持ちを伝えよう!

  • 回答数3
  • 閲覧数415
  • ありがとう数0

みんなの回答

  • 回答No.3

>これをブラウザサイズ変更で、それぞれのエントリが再配置されるサイトは作れないものかと考えたのですが・・・  それはわかるのですが、肝心なのはHTMLです。ちゃんとしたHTMLなら、デザインは自由に出来ます。No.2であげた例のほかに 「ホームページ製作中ですが3カラムの体裁崩れに付いて( http://okwave.jp/qa/q6891690.html )」  のNo.6とNo.7の回答であげているHTMLとCSSをコピーして、HTMLに書かれているサイズの適当な画像を用意して、スタイルシートの切り替え、および印刷プレビューでテストしてみてください。4種類のCSSがあるはずです。--「印刷および、一覧用」スタイルシートがウィンドウ幅に合わせて再配置されるタイプですね-- ★必要なことはきちんとしたHTMLです。ボタンクリックでボタン画像を変えて、更に横に画像を - Webデザイン・CSS - 教えて!goo ( http://okwave.jp/qa/q6913162.html )への回答(No.2)でも書きましたが、ある3種類、それ以外のもっと適切にあなたのページに適したマークアップであっても、【そのいずれであってもHTMLさえきちんと出来ていれば】「これをブラウザサイズ変更で、それぞれのエントリが再配置されるサイトは作れ」ますよ。  メニューを右側に置くためには工夫が必要ですが、一般的な左に置くタイプでしたら簡単でしょう。  方法自体は、「ホームページ製作中ですが3カラムの体裁崩れに付いて( http://okwave.jp/qa/q6891690.html )」の3番目のスタイルシートが参考になるでしょう。  

共感・感謝の気持ちを伝えよう!

質問者からの補足

回答ありがとうございます。 自分でさらに調べたところ、ネットより「可変グリッドレイアウト」の作り方を見つけることができました。 最初は、(ハードルが高過ぎると答えが見つけられないかもしれないと思い)普通の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」というヒントのおかげで答えを見つけることができました。 回答いただいた皆さん、誠にありがとうございました☆

関連するQ&A

  • Microsoftよりきれいにみえる

    Microsoftよりきれいにみえる 最近、↓MicrosoftのHP http://www.microsoft.com/ja/jp/default.aspx にもある、スライドするflashを時々別のサイトでもみかけます。 しかし、次のHP http://kk-online.jp/ にある、スライドバーナーというのでしょうか、flashとはまた別の方法で、 ものすごく滑らかで、きれいに動きます。 失礼ながら、ソースとCSSをのぞいてみても、あまりCSSを詳しくないので理解できませんでした。 CSSの .sm {list-style:none; width:595px; height:200px; display:block; overflow:hidden} この部分だと思うのですが・・・ どのように設定しているのか、ご存知の方がいましたら詳しく教えてください。 特に、「どのようにすれば左、右に動くのか」、「overflowだけでできるのか」という点です。

    • ベストアンサー
    • Flash
  • loadMovie()によって読み込まれたjpgが表示されない

    MCオブジェクトにloadMovie()で読み込んだ外部jpgファイルがうまく表示されなくて困っています。 Windowsで作成したjpgは問題ないようなのですが、 MACで作ったjpgは表示されないようなのです。 MACバイナリが原因か?と思いましたが、調べても情報が見当たりません。 何かFlash側で対処法などがございましたら、 教えていただけませんでしょうか? 参考になるサイト/書籍などの情報だけでも結構です。 よろしくお願いします。

    • ベストアンサー
    • Flash
  • 実行状態中にオブジェクトの配置、サイズ変更はできますか?

    ご質問させていただきます。 Visual Basic 2005 を使っています。 やりたいこととは、 実行状態のフォーム(GroupBoxオブジェクト等)にTextBoxや線/円オブジェクトを置いたり、 そのオブジェクトをマウスクリックで”選択して”縦横のサイズを変更したり、位置を変更したいのです。 (できればマウス右クリックでプロパティの変更なども) 大まかに言えば、 実行状態のフォームに「デザイン状態の操作」や「Excel上の図形描画の操作」と同じようなことができるのでしょうか? (ツールボックスからデザインフォーム上へのオブジェクトの配置、配置したオブジェクトに マウスクリックをしてのサイズ変更、コピー&ペースト処理など) はじめは、直線や四角形を描画して期待通りのことができるかと思いましたが、 やはり描画した後にその線を”つまむ”ことができませんでした。 ちなみに、VB2005ではLineやShape系はないので、VB2005 PowerPacks2.0 を入れることで、 VB6でのLineコントロールみたいな動きはできました。 良いアドバイスありましたらお願いいたします。

  • 回答No.2

★どのような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

動きはスムーズですか? こちらが確認したところ、とても重くて、 ブラウザサイズを変更するたびにフリーズしてしまいます。 ちなみに、JavaScriptで制御されていると思います。 制御部分を詳しく説明するのは大変ですので省略しますが、 もし気になるのでしたら、ソースを確認なさってはいかがでしょう?

共感・感謝の気持ちを伝えよう!

質問者からの補足

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

関連するQ&A

  • WEBサイトがブラウザやサイズにより変化してしまう

    言葉で言いたいことが伝わるかどうか心配ですが、伝わって解決できれば幸いです。 ブラウザにしろ、エクスプローラでも、メモ帳にしろ起動中は右上に「最小化」「最大化」「閉じる」ボタンがありますが、真ん中が「最大化」の場合はどのソフトもそのウィンドウサイズを縮小・拡大ができますよね?とりあえずこの行動を「ウィンドウサイズの縮小・拡大」とします。 今回、WEBサイトを作っているのですがブラウザによってかまたは先ほどの「ウィンドウサイズの縮小・拡大」をすることによって作ったWEBサイトの表示の仕方が変わってしまいます。 一つの例として今この質問投稿をご覧頂いているページの上部には 「トップ」「私に聞いて!」「ライフデザイン」「特集一覧」「ランキング」「QAラボ」 と一列で表示されていると思います。これが、ブラウザやウィンドウの縮小・拡大をすることにって 「トップ」「私に聞いて!」「ライフデザイン」「特集一覧」「ランキング」 「QAラボ」 と表示されたり極端にウィンドウの幅を短くしてしまうと 「トップ」 「私に聞いて!」 「ライフデザイン」 「特集一覧」 「ランキング」 「QAラボ」 と表示されてしまいます。もちろん、このOKWaveのサイト自体はそのような感じにはなっていませんが私が作っているものはそのように変わってしまいます。 これを直すにはどうしたらよろしいでしょうか?

    • 締切済み
    • PHP
  • オブジェクトごとに自由に配置したいのですが、うまくいきません。

    flashサイトを参考本を見ながら作っています。 頼れる人もいなくてここにたどり着きました。 やりたいことは、オブジェクトごとに配置したいのです。ロゴマークは左上、ボタンAは中央に、メニューは右下という風に。 問題は、ステージリサイズをしても、位置関係は常に保たれていると言うことです。ステージリサイズをしてもロゴは常に左上にあり、メニューは右下にあるという状態を作りたいのです。 どの本を見ても載ってません。どなたか良いアドバイス、もしくはこの本にあったよでもかまいません。よろしくお願いいたします。

  • オブジェクトの配置が微妙にずれる

    線と面の塗りをいれて、グリッドでもガイドでもどちらでもいいんですが、 オブジェクトを左寄席などに吸着させようとすると、角丸などでかいた線の部分が微妙に線の横にはみでるんですが、線もすべて含めて整列させたいときに非常に困っているのですが、解決方法を教えていただけないでしょうか?

    • ベストアンサー
    • Flash
  • as3 クラスファイルからルートにaddChildしたmcへのアクセス

    as3 クラスファイルからルートにaddChildしたmcへのアクセス いくつか似たような記事はあったのですが、解決せず質問させていただきます。 ルートにtestというmcを配置しています。 それに、外部のswfをaddChildしてます。 ~中略~ var loadMc:MovieClip = loader_obj.content as MovieClip; test.addChild(loadMc); これはうまくいっています。 このtestをクラスファイルから操作したいのですが、 ■クラスファイル(test.as)抜粋 MovieClip(root).test.x = 100; これでうごくかな~と思ってたんですが、 TypeError: Error #1009: null のオブジェクト参照のプロパティまたはメソッドにアクセスすることはできません。 at MethodInfo-181() このエラーが出ます。 どうしたらよいでしょうか。。。。

    • ベストアンサー
    • Flash
  • オブジェクトブラウザ

    オブジェクトブラウザを見ていると Const Function Property Sub がありますがそれぞれの意味は何でしょうか? Constは定数だと思うのですがどうでしょう? Functionは関数かな?と思ったのですが 「Function Clear()」などもFunctionなため関数ではないと思いました。 詳しく声明されているサイトなどはありますか? また上記4つ以外にも他の種類はあるのでしょうか? よろしくお願いします。

  • オブジェクトブラウザについて

    質問1 オブジェクトブラウザ8から管理→ロード→「DB→ファイル」タブで制御ファイル、データファイルを実行する操作をコマンドで実行する方法を教えてください。 質問2 上記操作を抽出条件を指定して実行する方法はありますでしょうか? アドバイスお願い致します。

  • オブジェクトブラウザについて

    オブジェクトブラウザでDBに接続しようとするのですが、アクセスできません。 インスタンスもちゃんと起動しているのですが・・・。 メッセージは「ベンダーの初期化に失敗しました」とあります。 原因は何でしょうか。知っている方がいらしたら教えてください。 お願いいたします。

  • オブジェクトブラウザ

    vba初心者です。 オブジェクトブラウザって「VBAの辞書」みたいなものでしょうか? 英語ばかりで使い方がいまいちわかりませんが。

  • Flashプルダウンメニューの重なりについて

    Flashプルダウンメニューの重なりについて http://www.karuizawanet.com/test/date.html フラッシュで作成したプルダウンの上にHTMLがかぶってしまい、 プルダウンメニューをクリック出来ない状態になってしまいます。 フラッシュを設置したときに、 プルダウン分下に空白ができるため、 CSSのマージンをマイナスすることによって 空白をなくしています。 初歩的な事かもしれませんが、 検索をかけてもCSSプルダウンとフラッシュコンテンツの重なりの記事ばかりで どうすればよいか分からず、 こちらに書き込みしたしだいです。 フラッシュは得意でなく、 このプルダウンメニューも いろんなサイトを参考にしてなんとか出来たというレベルです。 どなたか助けていただきたく お願いいたします。 宜しくお願いいたします。

    • ベストアンサー
    • Flash
  • 各ブラウザでの絶対配置の違いについて

    今フルCSSで絶対配置を一部使いコーディングをしているのですが、絶対配置で組むと各ブラウザで位置が合っていません。 【参考内部ソース】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- #a { background: #0066CC; height: 100px; width: 100px; position: absolute; left: 10px; top: 200px; } body { margin: 0px; padding: 0px; } #b { background: #CCCC00; height: 150px; width: 150px; top: 30px; position: absolute; left: 10px; } --> </style> </head> <body> <div id="a"> a </div> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <div id="b"> b </div> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> </body> </html> 左の数字と組み合わせてBOXを見るとIEとFoxではずれているのがわかると思います。どなたかこの解決法がわかる方いたら宜しくお願いします。

    • 締切済み
    • CSS