• ベストアンサー

CSSについての質問です。

フロートを利用してヘッダーにメニューを配置しています。 ブラウザの拡大や縮小で表示サイズを変更するとなぜかフロートした方にずれてしまいます。 フロートを利用したメニュー以外は特にずれないのですが 色々調べてみると隙間のないぴっちりのメニューを作るとフロートの場合はそのような現象が起こるような事が書かれていました。 一応そこに対処法も書いてあったのですが、効果はありませんでした。 どなたかサイト制作に詳しい方がいらっしゃれば教えていただきたいのですが ちなみに拡大縮小時のレイアウト崩れというのも通常は重要なのでしょうか?

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

いくつか対処法があります。  私はfloatはほとんど使いません。特にブロックの配置には決してと言うくらい使用しません。  ただし、IE7など後方互換を考えるときはfloatを使います。それでもきちんと標準モードで動作するようにしないと難しくなりますね。  floatの場合は、必然的に左か右に寄せるしかありませんが、スマホのようにウィンドウ幅が小さいときは、2列になったりします。  その場合は、設定がややこしいですが親コンテナブロックのサイズを参照して%幅で指定します。  最近は、基本的にdisplay:inline-block;とtext-align:centerを使用することが多いですが、position:absoluteを使うこともあります。

noname#185781
質問者

お礼

positionで改善出来ました。 ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • cssでのナビゲーションのレイアウトについて

    ナビゲーション用のロゴとメニュー用ボタンをflashで作り、cssでレイアウトを試みているのですが、希望の通りにできません。 希望のレイアウトは、 ※ヘッダー(サイズ:760×59.8PX)の左端にロゴマーク(126×59.8PX)、その右側にメニュー用のボタンを配置。 ※メニューボタンは全部で3つあり、A(サイズ:80×36PX)、B(75×34.2PX)、C(75×36.3PX)で、ロゴの右側になるべく等間隔で配置したい。 というものです。 これまでに試したのは、 1、<header>内に、ロゴとメニューのボタンを全てリスト化して配置し、一つずつmarginのサイズ調整。結果、IEではヘッダーのサイズが上下に広がり、ロゴの下側にメニューが3つ並びます。 FireFoxでは、ヘッダーのサイズは指定のままですが、メニューがヘッダーの下側に並んでしまいます。 2、次に、ロゴとメニューを左右にfloatで振り分けようとしたところ、IEでは全てのボタンがヘッダー内の左上に固まってしまい、FFでは、メニューボタンが本文にかぶさってしまいました。 長い質問になってしまって申し訳ありませんが、改善点をご指摘いただけないでしょうか?よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • 初めて質問させていただきます。

    初めて質問させていただきます。 web初心者です。 先方の要望により、ウィンドウサイズに合わせて拡大縮小するHPを制作したいのですが、 Fire foxでは綺麗に拡大縮小できたのになぜか他のブラウザで確認すると、拡大の仕方がおかしくなってしまいます。 IEでは拡大時にボタンの間などに隙間ができてしまいます。 Safariでは、横には拡大するのですが、縦に全く拡大してくれません。 サイトなどで色々調べたんですがコード内のテーブルや写真サイズを%で表示するやりかたでやっています。 何か改善策がありましたら教えてください。 よろしくお願い致します。

  • 背景画像が拡大縮小しつつ、大きさが一定のメニューを固定配置するには?

    flashにて、背景画像がブラウザの大きさに合わせて拡大縮小しつつ、 大きさが一定のメニューを固定配置するデザインを制作しようと思っています。 イメージとしては下記サイトのように、写真がブラウザに合わせて 伸縮するようにし、ブラウザ中心位置には大きさが一定のメニュー、 ブラウザ最下部にはヘッダーを配置したいと思っています。 http://www.creative-box.co.jp/ これまで数々の質問系サイトを見てまわり、独自に試行錯誤を繰り返したのですが、 部分的な質問&解説しか見当たらず、途方に暮れています。 そもそも上記サイトの場合、ステージサイズをどの程度にし、 どの程度の画像を用意すればいいのかすらわからない状態です。 どなたかご教授願えれば幸いです。

    • ベストアンサー
    • Flash
  • CSSでのテキストの下に画像などを配置したい。

    CSSでレイアウトしたページを作っています。 画面左のナビをテキストで作成しました。 (ヘッダーの下に、左のナビと右のメインエリアという構造) テキストの周囲をボーダーで囲んであります。 (TABLEは使っていません) テキストでの一覧のメニューの下に、画像のボタン等を配置したいのですが、メニューのテキストのテキストサイズを固定していないため、ブラウザの文字サイズを大きくしたりすると、メニューが縦に伸びたりします。 この時、メニューの下に配置する画像を、上のメニューの大きさ(縦幅)が変わってもそれに合わせて配置を上下させたいのですが、どうすればいいのでしょうか? とりあえずposition:absoluteでは絶対位置で指定されてしまうので、うまくいかないってことは分かっているのですが・・・ CSS自体まともに使うのは初めてなので、本等で調べながらやっているのですが、この部分が解決できません。

  • Tableレイアウトで寸分の狂い無くできていた配置をCSSレイアウトでおこなう術とは?

    Tableレイアウトでは寸分の狂い無くできていた配置ですが、 久しぶりにHPを制作しようとしたら今はCSSレイアウトな世界になってきて いるので今回はそれでやろうとして手法を調べていますが、 Tableレイアウトと比べて画像の配置がブラウザによって狂ってどうにもなりません。 IE7ではOKでもFirefoxやIE6では配置がずれるなど。 やりたいのは、ヘッダーエリア(width:750px,height:100pxくらい)の配置なのですが、このヘッダーエリアの中に「お問い合わせ」や「サイトマップ」という画像での名称兼リンクボタンを配置させたいのですが、 ・「お問い合わせ」は左から536px、上から15px ・「サイトマップ」は左から639px、上から15px の位置に寸分の狂い無く配置を希望しています(その上でマウスオーバーで画像入れ替えも行う)。 position:absoluteを使用すると可能ですが、これですと他の全ての箇所もabsoluteにしなくてはならなくなり、非常に制作に手間がかかってしまいます。 abloluteでなくピシッと配置させる方法はないものでしょうか。

    • ベストアンサー
    • HTML
  • CSSでレイアウト(絵参照)を組むにはどうすればいいですか?

    CSS勉強中のものです。 よく見かけるこのような感じのレイアウトで配置したいんですが・・・ ■■■■ □□□タイトル□□□ ■画像■ ○○○テキスト○○○ ■■■■ ○○○テキスト○○○ どうすればいいのでしょうか? 初心者の私が思いつくのは、「画像」と「タイトル」と「テキスト」それぞれを一つの大枠で囲んで、 画像を「フロート:left」 タイトルを「フロート:right」 テキストを「フロート:right、マージン:タイトル分のpx」 このようにすればできるとは思うんですが、なにか面倒なような気がします。 また、あまり複雑にしてしまうとIE以外のブラウザなどで問題が起きそうな気がしますし・・・ いろいろ方法はあるとは思うのですが、最適なやり方を教えていただけないでしょうか? どうかよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • Flashでサイト作成を考えております。

    Flashでサイト作成を考えております。 画面いっぱいに画像を配置し、メニューなどを配置し・・・・ 参考サイトは「氷温熟成珈琲」です。 画面いっぱいに画像を配置し、ブラウザの表示サイズが変わると 画像も自動的に拡大縮小するようです。 どうすれば、このようになるのでしょうか? 私がわかっているのは、アドビFlashを使って作成することのみです。 ご存知の方、アドバイスをお願いいたします。

    • ベストアンサー
    • CSS
  • ブログの見栄えについて

    こんにちは。ブログでアフェリエイトを考えている者です。それで、2つ質問をしたいと思います。 (1)勉強のためにいろいろなブログサイトを見ているのですが、当方、目が悪いので、ブラウザの文字を拡大して見ています(ブラウザはFirefoxで最小フォントサイズを18サイズにしています。Firefoxは文字を拡大してもサイトのレイアウトやデザインが崩れにくいので。) 文字を拡大して見ていると、ブログによってはレイアウトがかなり崩れたり、文字が重なったりして見にくいブログがあります。反対に文字を拡大しても縮小してもレイアウトやデザインが全く崩れなく、とても見やすいブログもあります。この違いは、どこからくるのでしょうか ブログを見る人は当然、文字を拡大して見る人もいますし、小さい文字でも大丈夫な人もいます。やはり、ブログを運営していく上では、ユーザビリィティに配慮したブログを作りたいと思いますので。 (2)4:3の液晶ディスプレイのパソコンを使用して、文章を作成したり、レイアウトを考えて画像を配置したりしてブログを作った場合、そのブログをワイドディスプレイのパソコンで見た時に、レイアウトが崩れたり文字が重なって見にくかったりしないのでしょうか。 どなたかご存知の方がおられましたらご教授お願いできないでしょうか。 よろしくお願いします。

  • action script3.0でフルflashサイトを制作する場合の

    action script3.0でフルflashサイトを制作する場合の質問です 下記のサイトのように、ブラウザ拡大縮小させた場合、 1.一定以上ブラウザザイズを小さくすると、背景イメージをの縮小がストップする。 また、一定以上ブラウザサイズを拡大させるとそれに伴い背景イメージも拡大。 つまり任意のサイズ内で、背景画像が縦横比固定で、ブラウザサイズに合わせて拡大縮小。 2.左横の白いバー内の文字は可変せず、バー本体は背景と同じで、任意の範囲で可変。 背景がブラウザサイズでどこまでも拡大縮小する方法はみつけたのですが、任意のオブジェクトと 任意の範囲内でとなるとわからなくなってしまいます。 よろしくお願いします。 http://shimaifudosan.co.jp/earththeresidence/

  • ページの幅が変わってしまう問題について(CSS)

    CSSレイアウトついての質問です。 DreamWeaverで作ったサイトを、ブラウザでプレビューしてパッと見は問題ないのですが、 サイト内でページを切り替えたときに、 ページの横幅が微妙に狭くなったり広くなったりする現象が起きたときは どういった対処をすればいいのでしょうか? WEB制作に詳しい方、お知恵を貸してくださると嬉しいですm(_ _)m よろしくお願いします。

    • ベストアンサー
    • HTML