訪問者のブラウザの大きさが変わってもＨＰのデザインを崩れなくさせる方法。

質問

僕は今ビルダー１０を使ってＨＰを作ってます。

サイトのデザインが決まり、
表やバナー等を挿入し、位置も整えました。

そしてブラウザボタンを押して、
ブラウザで見てもちゃんと整っている事を確認しました。

しかし、ブラウザの端っこを掴んでブラウザの大きさを小さくしてみると、
それまでちゃんと揃ってた表やバナーが一気に形を変えて崩れました。

このgooでもそうですが、
大抵のＨＰではブラウザの大きさを変えても、
入りきらない部分が隠れるだけで、
デザインが崩れてしまう事は無いと思います。

なんで僕のＨＰは崩れてしまうんでしょうか？
崩れずに固定させる方法を教えてほしいです。

回答No.6

p-applepie · ベストアンサー

No2です。
メニューの表とコンテンツの表の外側にもう一つ表を作ってみるのは
いかがでしょうか。

┏━━━━━┳━━━━━━━━━━━━━━━━━┓
┃┌───┐┃　コンテンツ　　　　　　　　　　　┃
┃├───┤┃　　　　　　　　　　　　　　　　　┃
┃├───┤┃　　　　　　　　　　　　　　　　　┃
┃└───┘┃　　　　　　　　　　　　　　　　　┃
┗━━━━━┻━━━━━━━━━━━━━━━━━┛

こんな感じで。(右の枠がずれていたらすみません)
太枠の表は表の属性で幅を100％にしておいて、枠を表示させない形に
すれば、思われているレイアウトになるのかと思いました。

お礼

希望のレイアウトで崩れないように出来ました＾＾

皆さん回答ありがとうございます。
今回は凄く参考になりました。

回答No.5

takkuni

#3さんが仰るように、表のセル属性で「自動的に行を折り返す。」にチェックを入れているからではないでしょうか。
試しにこのチェックを外してみてください。
「(1)表を挿入し、縦横共に100%に設定します。」については私にも分かりませんが、これは気にしなくてもいいように思うのですが。？

お礼

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

なんとか出来る様になりました＾＾

回答No.4

abukuma06

#3 abukuba06です。

サンプルページのHTMLソースを拝見しますとホームページビルダーを使用されているようですので、ビルダーでの作成方法に沿って説明します。

この場合、表をいくつも並べたり重ねたりするのではなく、表を縦横に分割・結合させて「セル」を作成し、そのセルの中に画像を挿入したり、テキストを配置していくといった作り込みにしてみて下さい。

以下にサンプルをアップしておきました。
ブラウザのメニューバーから「表示」→「ソース」を選択し、HTMLソースを確認してみてください。

http://myhome.nsf.jp/aq/070205_2.htm

尚、表の作成・分割・結合方法については以下のサイトを参照されてみて下さい。

表の挿入
http://www.homepagebuilder.org/basic/b021.htm
表の分割結合
http://www.homepagebuilder.org/basic/b022.htm

お礼

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

もしかしてビルダーでは僕の作ったレイアウトでの作成は不可能なのでしょうか？

abukuba06さんのサンプルは確かに作りやすいですが、
僕としては今のレイアウトでなんとかやってみたいのですが・・・

回答No.3

abukuma06

別サイトで同様の質問があったときの私の回答です。
参考になればと思います。

【レイアウトが崩れるのを防ぐにはどうしたらいいの？】という質問への回答
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail.php?qid=1210611037

お礼

ちょっと作ってみました。
http://2007-my-homepage.sakura.ne.jp/

めちゃくちゃ適当ですが、表を横並びにしてます。
ブラウザが最大だと問題無いのですが、
ブラウザを小さくするとコンテンツの部分が
メニューの下に潜ってしまいます。
これを何とか固定したいんですが、
これもその方法で直るでしょうか？

表を１００％にすると言うのは、白紙の状態でやるのですか？

回答No.2

p-applepie

どこでも配置モードを使用されていませんか？
これはブラウザの大きさによって文字が重なったりする事があります。
通常モードでテーブルを使用したりする事によっても、レイアウトの乱れは
防ぐ事は可能です。

お礼

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

ＨＰは通常モードで作成してます。
どこでも配置モードは良くないと聞いていたので・・・

回答No.1

noname#24040

スタイルシートは使ってますか？
テーブルなどには width 属性や nowrap 属性を設定してますか？
参考サイトがあります。
http://www.webword.jp/index.html

参考URL：

http://www.webword.jp/index.html

お礼

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

リンク先を見たんですが、ちょっと判りませんでした・・・