• ベストアンサー

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

僕は今ビルダー10を使ってHPを作ってます。 サイトのデザインが決まり、 表やバナー等を挿入し、位置も整えました。 そしてブラウザボタンを押して、 ブラウザで見てもちゃんと整っている事を確認しました。 しかし、ブラウザの端っこを掴んでブラウザの大きさを小さくしてみると、 それまでちゃんと揃ってた表やバナーが一気に形を変えて崩れました。 このgooでもそうですが、 大抵のHPではブラウザの大きさを変えても、 入りきらない部分が隠れるだけで、 デザインが崩れてしまう事は無いと思います。 なんで僕のHPは崩れてしまうんでしょうか? 崩れずに固定させる方法を教えてほしいです。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.6

No2です。 メニューの表とコンテンツの表の外側にもう一つ表を作ってみるのは いかがでしょうか。 ┏━━━━━┳━━━━━━━━━━━━━━━━━┓ ┃┌───┐┃ コンテンツ           ┃ ┃├───┤┃                 ┃ ┃├───┤┃                 ┃ ┃└───┘┃                 ┃ ┗━━━━━┻━━━━━━━━━━━━━━━━━┛ こんな感じで。(右の枠がずれていたらすみません) 太枠の表は表の属性で幅を100%にしておいて、枠を表示させない形に すれば、思われているレイアウトになるのかと思いました。

tatu-tatu
質問者

お礼

希望のレイアウトで崩れないように出来ました^^ 皆さん回答ありがとうございます。 今回は凄く参考になりました。

その他の回答 (5)

  • takkuni
  • ベストアンサー率24% (166/676)
回答No.5

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

tatu-tatu
質問者

お礼

回答ありがとうございます。 なんとか出来る様になりました^^

  • abukuma06
  • ベストアンサー率51% (43/83)
回答No.4

#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

tatu-tatu
質問者

お礼

回答ありがとうございます。 もしかしてビルダーでは僕の作ったレイアウトでの作成は不可能なのでしょうか? abukuba06さんのサンプルは確かに作りやすいですが、 僕としては今のレイアウトでなんとかやってみたいのですが・・・

  • abukuma06
  • ベストアンサー率51% (43/83)
回答No.3

別サイトで同様の質問があったときの私の回答です。 参考になればと思います。 【レイアウトが崩れるのを防ぐにはどうしたらいいの?】という質問への回答 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail.php?qid=1210611037

tatu-tatu
質問者

お礼

ちょっと作ってみました。 http://2007-my-homepage.sakura.ne.jp/ めちゃくちゃ適当ですが、表を横並びにしてます。 ブラウザが最大だと問題無いのですが、 ブラウザを小さくするとコンテンツの部分が メニューの下に潜ってしまいます。 これを何とか固定したいんですが、 これもその方法で直るでしょうか? 表を100%にすると言うのは、白紙の状態でやるのですか?

回答No.2

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

tatu-tatu
質問者

お礼

回答ありがとうございます。 HPは通常モードで作成してます。 どこでも配置モードは良くないと聞いていたので・・・

noname#24040
noname#24040
回答No.1

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

参考URL:
http://www.webword.jp/index.html
tatu-tatu
質問者

お礼

回答ありがとうございます。 リンク先を見たんですが、ちょっと判りませんでした・・・

関連するQ&A

  • HPのデザインについて。

    HPのデザインで、どうしてもこれを使いたい!というデザインがあります。…が、どうやって作るのかがわかりません; HPビルダーを所有しています。 パソコンスキルはあるほう…だとは思います。 説明しづらいデザインなので、参考素材サイトをはらしていただきます。 http://www.pw-design.jp/material/index.html このようなボタンを作りたいのですが…。

  • HPのデザイン

    http://home1.netpalace.jp/9/top.cgi このような形(タイトル部分とボタンとメインが別になっているもの)のHPをつくっているのですが なかなかデザインが決まりません。 なので上記のURLのようなHPの形(のデザイン)が乗っているサイトがあれば教えていただきたいです。 HPのサンプルでもかまいません。 できるだけカワイイかんじのものがよいです。 なかなか無いとは思いますが・・・(^^; よろしくお願いします。

  • HPビルダー 文字の固定について

    質問です。HPビルダー9を使っています。 文字の固定で質問なのですが、表を使ってHPを 作成している時一つ一つの表の中の文字の大きさを 固定することは出来るのですが、ページ全体を一気に 全て文字の大きさを固定することは可能でしょうか?

  • デザイン的なHP制作

    こんばんわ。 ひとつ質問させてください。 現在HP制作で行き詰っています。 それはデザイン的で、本格的なHP制作がしたいのです。 そして、このようなHPを作りたいという目標HPがあります。 では具体的なデザインといいますと、ずばり、芸能人の方々がお持ちのHPですが、本人の名前を挙げてもよいのかどうか…。 歌姫H.Aさんのような、フレームが縦に3つわかれていて、その真ん中のフレームに縦型に伸びたデザインで、リンクのボタンなどもデザインされているようなものです。 たとえばその日本の歌姫H.AさんのHPの「骨組み」などは、どのソフトで作られているのでしょうか… 画像などは、イラストレーターやフォトショップで加工し、動く絵はフラッシュだろうという予測はついているのですが…。 ちなみに、HP制作はビルダー6.5とタグ打ち(メモ帳)などは知っていて、基本的な骨組みも出来ます。CSSも少し分かります。 デザイン的なHPの骨組みを作るソフト名などを教えてください。 お願いします! 現在仕えるソフト イラストレーター フォトショップ ビルダー 直接のタグ打ち フラッシュ(リンクを飛ばすなどの基本的なアクションスクリプトは分かります) どうかお願いします。 ソフトが分かればあとは、自分で本を買って勉強しますので。 手助けをしていただけないでしょうか。

  • グラデーションデザインのHP

    最近は普通になってしまいましたが、グラデーションデザインのHPが主流になってますね。例えばGOOやYAHOOのトップページもよくよく見ると背景にグラデがかかってる。 このグラデデザインはどこからきた流行なんですか? WEB2.0と関係はありますか? ここのところ3Dロゴも普通に見かけるようになりました。特にRSSボタン等々。 これからはグラデ&3Dロゴなんかも取り入れたデザインがスタンダードになるんでしょうか? お詳しい方ご教授願います。

  • JAVAを使うと表示位置がずれる

    質問させて頂きます HPを作成してまして一応形は出来たのですが トップバナーをJAVAを使って更新ボタンを押すたびに画像が変わるように したのですがJAVAを使うと何故かトップバナーの表示位置が右へほんの少し ずれてしまいます。JAVAを使わずに1つのトップバナーだけだときちんとずれずに表示されるのですが何故でしょうか? よろしくお願い致します 使用ソフトはビルダーV8です

  • HP作成で表に挿入したバナーが表示されない!

    HPビルダーで作成しています。 リンクのページを作ろうと、表を作成し 左の列にバナーを入れて、右の列にはそのサイトの 説明を入れています。 バナーのないリンク先は、左の列に文字を入れ、その文字にリンクを張るとうまくいくのですが バナーを挿入するとプレビュー画面では表示されても インターネット上に転送すると全く表示されません。 その表の枠に何も入力されたものがないように 見えます。 そのバナーはgif.アニメーションです。 bmp.の画像を入れてみるとちゃんと表示されました。 リンクもできます。 別のページのgif.アニメーションにリンクを張ってみると ちゃんとできます(表ではありませんが) 表の中に画像を入れるときに 何か問題があるのでしょうか?

  • イラストレターで作成したデザインをHPビルダーに転用

    イラストレターで四角ツールの中に文字を記入し、HPビルダーに張り付けても四角のプレートもしくは文字しか転用できません。グループ化にしてもできないのですが・・・。 四角ツール&文字で一つのデザインなので一体としてビルダーに挿入したいのですが、どなた様かアドバイスしてください。 イラストレーターCS ビルダーは9を使用しています。

  • HP作成について

    現在ビルダー12でHPを作っているのですが、表の作成に関してわからないことがあります。 表のある一つのセルを独立させたいのですが、どうすればいいのでしょうか。 例えば、田んぼの田の字のような2×2の表を作ったとして、右側の横線を上下に動かすと、左側の横線も合せて動きますよね? そうではなくて、右側のセルの幅を動かしても左側はそのままその形で固定しておきたいんです。 例の田のような単純なものならまだいろいろやりようはあると思うのですが、これが複雑な表になってくると、どうすればいいのかわからなくなってしまいます。 上手く説明できているかどうかわかりませんが、ご返答お待ちしています。

  • 背景が流れる(スクロールする)HPを作る方法

     ビルダー6・5で作成しています。ホームページの背景が上から下に流れるようなデザインにしてみたいと思っています。前に横にスクロールしているHPは見たことがあります。文字などは固定されていて、壁紙だけが動いていました。それは雲が動くデザインでした。雲自体もアニメだった気がするんですが、詳しくは覚えていないんですが。  何か、参考になる書籍、サイト、ご意見がありましたらお願いします。書籍については、逆引きというか、こういう事がしたいという事から、探せるようなものを、ご紹介頂ければ、助かります。引き続き自分でも探してみますが、ご協力お願いします。  

    • ベストアンサー
    • CSS

専門家に質問してみよう