• 締切済み

ウインドウ幅に合わせてレイアウトを変更する

こんにちは。はじめまして。 ブログを制作していて、疑問があるのでご質問させていただきます。 わたしが手がけているブログは、横幅が最大のものです。 つまり、今私のブラウザ(ウインドウ幅)で見る限り横いっぱいに広がっています。 その状態で、ウインドウのサイズを小さくしてしまいますと 横スクロールバーが現れてしまい、どのウインドウサイズに対応できていません。 ttp://www.designwalker.com/ こちらのサイトのように、ウインドウのサイズがどのサイズでも 横スクロールバーがでないようなレイアウトに自動的に変更するためにはどうすればいいのでしょうか? わかりにくいご説明ですいません。 ご理解いただけた方、ご存知の方のご回答を心よりお待ちしております。 駄文失礼いたしました。 お手数をおかけいたしますが、よろしくお願いします。

みんなの回答

  • Muller3
  • ベストアンサー率81% (800/979)
回答No.4

ブログでしたら大概、CSSでデザインを制御しているのではないかと思うのですが。 参照サイトのHTMLソースとCSSを見てみるとわかりますが、例えば#layoutがwidth: 90%;になっています。このように、要素の幅をpxなどの数値で指定するのではなく、相対値(%)で指定します。 細かいレイアウト崩れなどはページの構造を見てみないことには原因はわかりかねますので、とりあえず「リキッドレイアウト」「リキッドデザイン」で検索して研究してみてはいかがでしょう。

回答No.3

Webページのレイアウトを自在に行うには HTMLの他にCSS(スタイルシート)と言う手法を使います。 http://css.eweb-design.com/ などにスタイルシートのサンプルがあります。 此れを使うとウィンドウサイズに影響されないページを 作成することが出来ます。

  • h_yoshi
  • ベストアンサー率42% (52/122)
回答No.2

一例ですが <img src=画像URL width=90%> 横長の画像を常にウインドウ幅90%に合わせるために width=90%としています。 またこのページでは(右クリック⇒ページのソース表示) <table cellspacing="0" cellpadding="0" width="100%" border="0"> 質問覧に使用されているtableタグではwidth="100%"を用いていますね もしここで%(パーセント)を用いずwidth="1500"とかにされていたら 当方のパソコンでも横スクロールバーがたぶん出るだろうし 先の<img src=画像URL width=90%>が <img src=画像URL>だった場合 原本画像の横幅があまり大きな数字でも同じような事が起こります。

回答No.1

参照先を拝見しましたが普通にスクロールバーが表示されますが? どのようにしたいのか良く分かりませんが レイアウトを動的に変更したいのであれば cssで相対的に配置をするようにしてあげれば サイズを制御することが出来ます。

noname#50212
質問者

補足

説明不足ですいません。 ある程度サイズが小さいと横スクロールバーはでます。 自分のブログはウインドウサイズを小さくすると レイアウトが崩れてしまいます。 ですが、参照先はウインドウサイズを縮小しても レイアウトはさほど崩れないように工夫されているようです。 誠に申し訳ございませんが cssを相対的に配置する とはどういうことなのでしょうか? 愚問で申し訳ございません。