背景画像がどうしても表示されない → 「clear:both;」を挿入してみる

CSSCSSトラブル対応

 状態:-  閲覧数:13,495  投稿日:2013-01-21  更新日:2017-10-29
・解決するまで、5時間近くかかった
・めっちゃしんどいわ!

・こういうやつ
・外側のdivに当てたクラスで背景画像を指定してるのに、何故か表示されない
<div class="背景画像指定クラス">  
<h2 class="フロート左クラス"></h2><ul class="ロート左クラス"></ul>
</div>


・結局、「clear:both;」挿入したら、無事表示されるようになった
<div class="背景画像指定クラス">  
<h2 class="フロート左クラス"></h2><ul class="ロート左クラス"></ul>
<div style="clear:both;"></div>
</div>


問題
・「clear:both;」挿入しなくても、無事表示されているサイトもある
・「clear:both;」挿入しないと、表示されないサイトもある
・両者の違いが不明
・考えられるのは、レスポンシブにしていることが何か悪影響を及ぼしているのではないか、と言うもの
・レスポンシブ系は、widthとかを固定指定出来ないので、細かい挙動制御が難しいわ、と改めて思ったよ

結論
・いずれにしても、画像パスや、CSS指定方法があっているのに、背景画像がどうしても表示されないときは、
1.中でフロートを使用していないか確認
2.使用していたら、「clear:both;」を挿入してみる


CSSがどうしても効かない → 該当CSSの読込可否 → 該当CSSの反映可否


×

ゲストコメント一覧

番号 内容 投稿日
1                                                          2013-09-03
2 thanks!!! 2015-01-20
コメント件数 … 2件

類似度ページランキング
順位 ページタイトル抜粋
1 テーブル枠線がどうしても消えない時は「border-collapse: collapse;」 47
2 ページで使用されている「id名」「class名」をChromeで取得したい   44
3 Firefoxで画像が表示されない 43
4 「position:sticky;」がどうしても効かない →
を一旦削除してみる →
に「display:inline;」を指定
42
5 URLが折り返し表示されない/Google Chrome 42
6 「レイアウト崩れ」がどうしても解決しない → Chrome「デベロッパーツール」で怪しいと思った要素を、正常表示されるまで削除し続けていく 41
7 rssページが正しく表示されない/Google Chrome 41
8 Chrome プロファイルが壊れている、と毎回表示されるが、英語なのでどうしたら良いか分からない 39
9 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある 39
10 デフォルトの「Google Chrome」ではURL欄にwwwが表示されないため、「Microsoft Edge」を使用する 38
11 Braveインストールしてみたけれども、全ての広告を必ず非表示に出来るわけではないみたい 36
12 「Data URI scheme」画像拡張子は、正しいとは限らない 36
13 bootstrap3で意図せず横スクロールバーが表示される場合は、containerクラスの入れ子を疑う 35
14 作成した素材がどうしても見つからないときは、「png形式」を疑ってみる 35
15 画像を保存させないようにするjQueryプラグイン「jquery.dwImageProtector.js」 35
16 Illustrator CS2 でファイル名に「更新済み」を追加しない 35
17 「Twitter Bootstrap」導入したらおかしくなった時、試した方がよいかもしれないこと 34
18 「Google Chrome」のリリースノート(更新履歴)は公開されている 34
19 resizeが効かない場合は、min-heightを設定してみる 34
20 「:first-child」が効かない場合は「:first-of-type」 34
2023/10/04 22:59 更新
週間人気ページランキング / 9-27 → 10-3
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 26
1 鉄道会社毎のカラーコード | カラーコード(色) 26
2 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 24
3 「bgcolor」「background-color」「background」の違い | CSS 17
4 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 15
5 画像大きさ | 他サイト調査(HTML) 14
5 RGBの種類 / ビットカラー | RGB(色) 14
6 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 13
7 Design 0 11
7 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 11
8 「東京都」のカラーコード取得は難しい | カラーコード(色) 10
8 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 10
8 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 10
9 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 9
9 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 9
9 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 9
9 デザイン変更 | Webデザイン(デザイン) 9
10 16進数カラーコード / 2進数 8
11 「position:absolute;」指定する際は、必ず(親要素を含む)祖先要素の何れかで「position」を明示的に指定 | position(CSS) 7
11 「属性」「プロパティ」「アトリビュート」の違い | CSS 7
2023/10/4 1:01 更新