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

CSS

　状態:- 　閲覧数:8,053 　投稿日: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/18 19:53 更新
週間人気ページランキング ／ 9-11 → 9-17
順位 ページタイトル抜粋 アクセス数
1 Design 0 6
2 「東京都」のカラーコード取得は難しい | カラーコード(色) 4
3 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 2
3 Inkscape | ソフトウェア 2
3 Flickrがサポートするライセンス 9 ＋ 特別なライセンス 2 | 画像著作権(画像) 2
3 アカウント作成 2
3 パッケージ化されてない拡張機能 | Chrome 拡張機能 2
3 テーブル枠線がどうしても消えない時は「border-collapse: collapse;」 | Backgrounds and Borders Module(CSS) 2
3 「CSSプロパティ」書く順番 | コーディングルール 2
3 カラーマネージメント | 色 2
3 RGB → 色相H … 最小値基準 × 図形 の考え方 | 色変換(色) 2
3 「position:sticky;」がどうしても効かない →
を一旦削除してみる →
に「display:inline;」を指定 | CSSトラブル対応(CSS)
2
3 HSV ／ HSB | HSV(色) 2
4 キャラクター無料作成ジェネレーター ／ FLASH以外 ／ オンラインサービス | イラスト参考(デザイン) 1
4 Chromeブラウザは、ユーザーという単位で情報管理している ／ Chromeブラウザには3つのモードがある ／ ログイン状態の動作確認を行う場合は、通常モードで行う 1
4 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 1
4 効果を打ち消すスタイルシート | CSS 1
4 候補一覧 1
4 「Google Chrome を起動後、100%の確率で3分以内に落ちる」場合は、アンインストール後インストールし直すしかない | Google Chrome(ブラウザ) 1
4 メニュー(UI) カテゴリー 1
2026/9/18 5:05 更新