• ベストアンサー

CSSレイアウトによる環境別不具合

最近やっと完全スタイルシートによるコーディングの勉強を初めました そこで早速環境別のバグの壁にぶち当たってしまいました＞＜ 内容は「flortさせた子要素の親ボックスの背景色(背景画像)が表示されない事です。」 過去ログを色々探ってみたのですが色々な方法があり「CSS clearfixハッ ク」を使用した例や<div style="clear:both;"></div>を使用した例があり試してみたのですがどれも納得のいく解決方法ではありませんでした。 私的な希望としては -------------------------------------------------- Win→IE/Fire Fox/NN/Opera/Safari/バージョンは 最新のものから1つ前位まで問題なく表示 Mac→IE/Fire Fox/Safari/バージョンは最新のものから 1つ前位まで問題なく表示 ドリームウィーバー上でのプレビューでもレイアウト崩れしない ジャバスクリプトやCSSハックを使ってのCSSの振り分けは極力避けたい -------------------------------------------------- 以上の条件をクリアーできるような解決方法を探しています。 どなたかアドバイスをいただけると助かります。 下記アドレスに現在製作中のHTMLファイルとCSSファイルをアップしてありますのでお暇な時にでも覗いていただきアドバイスいただきたくおもいます。 余談ですがこの手のバグで一般的に一番ベストな解決方法はどんな方法なのでしょうか？？ ■HTML http://sangoclip.web.fc2.com/test/ ■CSS(レイアウト用) http://sangoclip.web.fc2.com/test/shared/css/default.css ■CSS(デフォルトCSSクリアー用) http://sangoclip.web.fc2.com/test/shared/css/reset.css

  • CSS
  • 回答数3
  • ありがとう数3

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

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

こんにちは。 Webデザインの仕事をしている者です。 この問題について、やはり一般的な回避方法はｃlearfixを用いる方法だと思います。 clearfixについてもいろいろ使い方があると思いますが、 参考URL、勉強になるかと思います。 また、最も簡単な回避方法は親要素にも同じfloatをかけることではないかと思います。 レイアウト的に、問題ないのであれば、子要素と同じfloatを親要素にもかけてみてはどうでしょうか？

参考URL：
http://norisfactory.com/stylesheetlab/000038.php
mugen_1001
質問者

お礼

早々のご回答ありがとうございます。 やはりｃlearfixが一番ベストですか実は昨日NN7.1に対応できる ｃlearfixを見つけましてそれを使用すればなんとか希望の条件に近づきましたので諸々の問題はこの方法で対応しようとおもいます。 ちなみにご指示いただきました「子要素と同じfloatを親要素にかける」やり方は初耳で早速試したみた所結構現実的に使えそうな感じでした＾＾ ありがとうございます。 今後使える場所では使っていこうとおもいます。 今回はアドバイス本当にありがとうございました。 今後製作過程で色々問題が出てくるとおもいますので その時はまたご質問させていただきますので記事を見つけましたら アドバイスの程お願いしますね

その他の回答 (2)

noname#83877
noname#83877
回答No.3

単純にclearすれば良いのではないでしょうか。

回答No.2

例示のソースは、むやみやたらにDIVで何階層にも分けて意味なく floatしているから面倒くさいんです。DIVは wrapper 　├ header 　├ left 　├ right 　└ footer このくらいシンプルにしてleftとrightだけfloatすればいいじゃな いですか。main-containerに指定していた背景色はwrapperに指定 して、headerとfooterの背景を別指定しましょう。headerの中身 だって、IMGだけfloatしてれば充分です。ULを幾重にも囲むDIVも 必要なくて、ULのtext-alignを右に変えるだけ。 これで、複雑なハックはまったく不要のはずです。

mugen_1001
質問者

お礼

早々のご回答ありがとうございます。 確かにそうですね＞＜まさにご指示いただいた通りです。 こうなってしまったのも各ボックスにマージンやらパディングやらボーダーやらを指定する際に直接そのボックスに指定するより囲みは増えますがマージンやらパディングやらボーダーやらを指定する専用の囲みを設けてその囲みに設定した方がいいという記事を見まして。 それに準じてやっていたらこんな感じになってしまいましたｗｗ やはりなるべくシンプルにした方が問題もおきにくいですし問題箇所も発見しやすいですよね。 今後ダイエットできる箇所はダイエットしてシンプルにしていきたいと思います。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • Win IE5.5～6.0での余白に関するバグ

    最近やっと完全スタイルシートによりコーディングをマスターする為に勉強を始め何とかある程度形になるまでコーディングが出来たのですが Win IE5.5と6.0でバグが発生してしまいました。 幅532pxのボックス内に532pxの画像を配置した所右側に1px～2pxの無駄な余白が出来てしまうのです 他のモダンブラウザーでは全て平気なのですがIE5.5と6.0でこの現象が発生してしまいます。画像を添付しましたので症状を見てください。 それと下記アドレスに現在製作中のHTMLファイルとCSSファイルをアップしてありますのでお暇な時にでも覗いていただきアドバイスいただきたくおもいます。 宜しくお願いします ■HTML http://sangoclip.web.fc2.com/test/ ■CSS(レイアウト用) http://sangoclip.web.fc2.com/test/shared/css/default.css ■CSS(デフォルトCSSクリアー用) http://sangoclip.web.fc2.com/test/shared/css/reset.css

    • ベストアンサー
    • CSS
  • CSSでのレイアウトについて

    現在、table、flameタグを使わず、CSSだけでレイアウトを組んでいるのですが、その際、BOX同士が離れてしまってどうしてもBOX同士をくっつけれません。。Illustratorで作った画像をスライスしてそれをつなげたいのですが。。。marginも0にしてるのに、どうもBoxの底辺にわずかな隙間ができてしまうのです。。 css body { width:800px; margin:0; padding:0; border:0; } #outline { width:800px; margin:0; padding:0; border:0; } <!-- endheader --> <div class="center-free1"> <div class="main"> メインスペース </div> <div class="free1"> </div> <br class="clear"> </div> <div class="free2"> 灰色back </div> <div class="clear"> </div> <div class="under"> </div> </div> </BODY> 一応ソースも載せてみました。。周りでcssを使ってる人がいないので、誰にも聞けず、途方に暮れています。。どうかご教授願います。。

    • ベストアンサー
    • CSS
  • CSSでレイアウト

    3つのブロック要素div1,div2,div3があった場合に添付のような レイアウトにするにはどうすればよいでしょうか？ div2,div3をさらにレイアウト用のdiv4でグループ化してしまえばできますが、 今後もできるだけHTMLをいじることなくCSSだけで自由にレイアウト変更をできるように なっておきたいと思っています。 できれば座標指定はしたくないのでPositionのStaticは使わないほうが嬉しいです。 全部Staticにする方法はわかっておりますので全箇所Staticではなく、 「全部相対postionではなく1か所だけStaticを使う」などが効率的だ、というのであれば そちらのやり方でも教えていただけると助かります。 特定の環境での実行を意図していませんが必要な場合はIE8以降、などイマドキな環境 での利用しやすいものがより助かります。HTML/CSSのバージョンはそれに応じる形で 特に指定はございません。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • スタイルシート IE環境でのバグ

    下記アドレスが現在テスト中のサイトのアドレスです。 グローバルメニューボタン下部(添付画像の赤枠の部分)に2～3px程の白い隙間がどうしてもできてしまいます。 色々CSSの設定を試してみたのですがどうしてもWIN XP IE6の環境だけ回避できないのです その他の一般的なモダンブラウザでは大丈夫なのですが・・・ どなたか原因を教えていただけると助かります。 宜しくお願いします。 ■HTML http://sangoclip.web.fc2.com/lesson01/ ■デフォルトCSS http://sangoclip.web.fc2.com/lesson01/shared/css/default.css ■リセットCSS http://sangoclip.web.fc2.com/lesson01/shared/css/reset.css

    • ベストアンサー
    • CSS
  • HTML5をCSSでレイアウトする場合

    section 　articleといった新しい要素をCSSのfloat等でレイアウトするのは間違いなのでしょうか？ いろいろと調べてみましたが、sectionを使ったレイアウトは駄目で、divでレイアウトするとか… また、article aside nav 等をCSSでカラムレイアウト解説をしているサイトもありました… また、Q&Aサイトで <div id="article_1"> <article> …………… </article> </div> のようなsampleで、わざわざ無駄なことをせずにhtml5の新しい要素でレイアウトしましょう…？ <article id="article_1"> …………… </article> と言うような回答もありましたが… 確かに、HTML5でWEBページ作成をするのに、レイアウトは<div>でネストするのは意味がないように思いますが… よりよい方法を教えてください。m(_ _)m

    • ベストアンサー
    • HTML
  • CSSで高さ100％のレイアウト

    テーブルを使用せずCSSでのレイアウトなのですが フッター位置をブラウザの一番下にマージン無しで指定したいのですが出来ません。 テーブルでは <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top">内容</td> </tr> <tr> <td valign="bottom">フッター</td> </tr> </table> というように指定していたのですが CSSでのレイアウトはHTMLを <div id="container"> <div class="content">内容</div> <div id="footer">フッター</div> </div> .CSS では #container { height: 100%; } は無効なのでしょうか？ 他のやり方でもフッターをブラウザの一番下にマージン無しでレイアウトできる方法があったら教えて下さい。

    • ベストアンサー
    • CSS
  • レイアウトはテーブルよりＣＳＳですか？

    今まで、Webサイトのレイアウトは、テーブルを何重にも入れ子にして、行ってきました。 最近、「レイアウトにテーブルを使うのはよくない」「テーブルで全体を囲っているレイアウトはダサい」などの意見を聞くようになってきました。 奮起して、テーブルでつくったページをＣＳＳに書き換えようと思いましたが、なかなか困難です。 位置を左上基点に、それぞれの<div>をabsoluteで設定すれば、比較的容易にレイアウトを組めるのですが、やはり全体を画面の中心に持っていきたい、そうなると、全体をテーブルで囲って、align="center"が簡単です。 そこで、質問です。 ・ＣＳＳでレイアウトを組むとき、左上を基点にされていますか？全体を中央に配置するようにされていますか？ ・ＣＳＳで、全体を中央に配置するとき、全体を<div>で囲って、その中に<div>を入れ子にして、配置していくと思いますが、なかなか思い通りの配置になりません。このやり方であっていますか？簡単なやり方がありますか？ ・やはり、レイアウトにはテーブルよりも、ＣＳＳを使ったほうがいいですか？ ご意見・ご回答いただきたく、どうぞよろしくお願いします。

    • ベストアンサー
    • CSS
  • Yahoo! UI LibraryのFonts CSSについて

    YAHOOが提供している Yahoo! UI LibraryのFonts CSSを利用して各ブラウザー毎のフォントサイズを統一しようとしているのですが 下記参考サイトで紹介している通りに設定をして使用したのですがどうもうまく適用されません。 ■参考サイト→http://thinkit.jp/article/813/1/ ちなみにYahoo! UIのFonts CSSはローカルにデータを持たずにヤフーサーバーから直接リンクして使用しています。 そもそも使用の仕方が間違っているのでしょうか？？ 問題がどこにあるのかアドバイスいただけると助かります。 下記に現在テスト製作中のサイトのアドレスを記載しておきますので中身を見ていただきアドバイスいただけると助かります。 ■HTML http://sangoclip.web.fc2.com/test/ ■デフォルトCSS http://sangoclip.web.fc2.com/test/shared/css/default.css ■リセットCSS http://sangoclip.web.fc2.com/test/shared/css/reset.css ■Yahoo! UI LibraryのFonts CSS http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css

    • 締切済み
    • CSS
  • スタイルシートのline-hightについて教えてください

    下記アドレスが現在テスト中のサイトのアドレスです ■HTML http://sangoclip.web.fc2.com/test/ ■デフォルトCSS http://sangoclip.web.fc2.com/test/shared/css/default.css ■リセットCSS http://sangoclip.web.fc2.com/test/shared/css/reset.css ■Yahoo! UI LibraryのFonts CSS http://sangoclip.web.fc2.com/test/shared/css/fonts.css フォントサイズは全て同じです(12px相当) ラインハイトは左から1.1 真ん中1.5 右1.8と 設定しているのですが ラインハイトの設定の違いによりそれぞれの最初の行上部と最後の行の下部の余白が違ってしまいます。 ラインハイトを大きく設定すればするほど上下に無駄な余白がとられてしまうのですが厳密に1px単位で余白を設定する際にとても困ってしまいます。 上下に余白を作りたくない時でもラインハイトの影響を受けて余白が出来てしまうのですこれはCSSの仕様上しょうがないのでしょうか？？ それとも何か解決方法はあるのでしょうか？ どなたかアドバイスいただけると助かります。 宜しくお願いします。

    • ベストアンサー
    • CSS
  • IE7でclearfixが効かない？

    winXP環境、xhtml+cssでwebページを作成していますが、壁にぶち当たっています。 親ボックスの中に２つの子ボックスをfloatでレイアウト、というよくあるパターンですが、親ボックスにclearfixを指定しているのにIE7で表示すると、floatさせたdivが親ボックスからはみ出した状態で表示されます。 Firefox3/IE6/IE8で表示確認すると問題なく表示されます。 ■htmlソース http://bangn.web.fc2.com/testpage.html ■CSSソース http://bangn.web.fc2.com/css/default.css（デフォルトスタイルリセット用） http://bangn.web.fc2.com/css/base.css（divレイアウト、clearfix） http://bangn.web.fc2.com/css/kakunin.css（レイアウト確認用に各divのborderを黒くしたもの） htmlの書き方がおかしいのか？clearfixの記述がおかしいのか？とソースを何度も見直ししましたが、解決に至らず困っております。 どなたかアドバイスをいただけないでしょうか？ よろしくお願いいたします。

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する