レイアウトがどうしても崩れるときは、div marginへマイナス値が設定されていないか、確かめる

CSS

 状態:-  閲覧数:8,042  投稿日:2011-03-07  更新日:2013-01-30
トップページと同じCSSを用いているのに、
階層ページで、レイアウト崩れが発生。

DTD宣言まで確認したのに、どうしても解決しなかった。
あり得ん、と思って、
関係ないところまで全部見ていったら、

とあるdivタブに、マイナスmargin値が設定されていることに気が付いた。


うーん、
そんなことするかよ、って思ったよ。

要は、
先入観だよね。

なんだかんだ言っても、不具合の原因探るときって、
まずは、過去の自分の引き出しの中から、関係すると思われる事柄を引っ張ってきて、
順番に確かめていく、やり方をするからね。

ちょっと、これまで実際に経験したことがない、CSSの使い方をされてるサイトだったので、
アタリをつけるに時間がかかってしまった。

なので、ここにメモしとくよ…


aタグで複数のブロック要素を囲むやり方

height:100%;の効果を打ち消す(あるいは上書きする)には、height:auto!important;



類似度ページランキング
順位 ページタイトル抜粋
1 レイアウトがどうしても崩れるときは、div marginへマイナス値が設定されていないか、確かめる 82
2 resizeが効かない場合は、min-heightを設定してみる 40
3 box-sizingは危険なCSS / レイアウトや位置がどうしても意図した通り設定できない場合は、box-sizingを疑う 39
4 作成した素材がどうしても見つからないときは、「png形式」を疑ってみる 38
5 Chromeがおかしくなった。width認識が狭くなりレイアウトが崩れる 38
6 「レイアウト崩れ」がどうしても解決しない → Chrome「デベロッパーツール」で怪しいと思った要素を、正常表示されるまで削除し続けていく 37
7 レスポンシブの margin と width 設定 35
8 Chrome プロファイルが壊れている、と毎回表示されるが、英語なのでどうしたら良いか分からない 35
9 Braveインストールしてみたけれども、全ての広告を必ず非表示に出来るわけではないみたい 34
10 divタグがdisplay:block;とかしても、ブロック要素にならないときは、 33
11 iframe経由で読み込んでいるページへ直接アクセスした場合は、トップページへリダイレクト 32
12 背景画像がどうしても表示されない → 「clear:both;」を挿入してみる 32
13 textareaを手動リサイズできない時は、ブラウザを落としてみる 32
14 「z-index」が効かない時は「-1」を指定してみる 32
15 指定兄弟要素(h1~h5タグ何れか)のmarginを取得して、指定要素に適用させたい 31
16 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある 30
17 CSSで直前の要素を取得するセレクタはない。ので、直後の要素を取得してマイナス設定値を指定しました。 30
18 navタグで定義している部分だけCSSが効かない【html5】 30
19 一つの要素に対して「id 属性値」を複数指定することは出来ない 30
20 「Google Chrome」タブをグループへ追加すると、そのタイミングでグループは自動的に開かれてしまいます。開かないようにすることはできません 30
2026/9/04 20:11 更新
週間人気ページランキング / 8-28 → 9-3
順位 ページタイトル抜粋 アクセス数
1 Design 0 5
2 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 4
3 RGB → HSL 変換式 / 約分対応 2
3 CopyTabTitleUrl | Chrome 拡張機能 2
3 「属性」「プロパティ」「アトリビュート」の違い | CSS 2
3 Sword Art Online dress up game 2
3 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 2
3 Chromeがおかしくなった。width認識が狭くなりレイアウトが崩れる | Google Chrome(ブラウザ) 2
3 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2
4 「Google Chrome」を再起動するためには「chrome://restart」へアクセスします。 | Google Chrome(ブラウザ) 1
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 1
4 「水彩画」画像フィルタ実行例 | 画像フィルタ(画像) 1
4 Fireworks が開発終了したと思われる理由 1
4 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い | HTML5(HTML) 1
4 RGBの種類 / ビットカラー | RGB(色) 1
4 ソフトウェア カテゴリー 1
4 Chromeブラウザは、ユーザーという単位で情報管理している(Cookieを使用する場面もあるが、必ずしもCookieだけに頼っているわけではない) | Google Chrome(ブラウザ) 1
4 CSSセレクタ(CSS) カテゴリー 1
4 画像縦横比の問題 | 画像 1
4 「Google Chrome を起動後、100%の確率で3分以内に落ちる」場合は、アンインストール後インストールし直すしかない | Google Chrome(ブラウザ) 1
2026/9/4 5:05 更新