floatベースで起きる重なりと回り込み
古いコードに多いfloatベースの2カラムは、要素を左右に浮かせて並べる仕組みです。floatした要素は通常の流れから外れるため、親要素が高さを失って後続の要素が回り込み、重なって見えることがあります。
この対策にはclearfixなどでfloatを解除する必要があります。解除が漏れていると、フッターが本文に食い込んだり、背景色が想定どおり広がらなかったりします。
floatは折り返しの制御も手間がかかります。狭い画面で縦並びにするには、メディアクエリでfloatを解除し幅を100%に戻す指定が別途必要です。
flexで折り返しを設計する
現在はflexboxで2カラムを組むのが扱いやすい方法です。親にflexを指定すると子要素が横並びになりますが、初期状態では折り返しません。狭い画面で縦に積みたい場合はflex-wrapで折り返しを許可します。
各カラムにはflex-basisや幅の指定で目安の横幅を与えます。合計幅が親を超えたときにwrapが効いて自然に縦並びへ移行します。明示的にメディアクエリで切り替える方法と併用すると、意図した幅で確実に折り返せます。
症状別チェック表
2カラムが縦並びにならない・重なるときのレスポンシブ対処は、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。
確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。
- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する
ブレークポイントの当て方
縦並びへ切り替える画面幅（ブレークポイント）は、コンテンツが窮屈になる幅を基準に決めます。一般的なスマホ幅だけでなく、タブレットの縦横や折り返しが不自然になる中間幅も確認すると安全です。
モバイルファーストで考えると、まず1カラムを基本にし、広い画面でだけ2カラムにする書き方が破綻しにくくなります。狭い側を初期状態にすることで、想定外の幅で重なる事故を減らせます。
崩れを直す手順
次の順で見直すと整理しやすくなります。
- floatを使っているならflexやgridへの置き換えを検討する
- 親にflexとflex-wrapを指定して折り返しを許可する
- 各カラムに目安の幅を与え、合計が親を超えないか確認する
- 縦並びにしたい幅でメディアクエリを設定する
- 中間幅やタブレットでも重なりや余白崩れがないか確認する
確認用URLで複数幅を比較する
レスポンシブの崩れは画面幅を連続的に変えながら見ないと気づきにくいものです。関係者と同じ成果物を見ながら「この幅で重なる」と指摘し合えると、修正が速く進みます。
ギガサイト便にHTMLとCSSをまとめてドロップすると共有URLが発行され、各自がPCとスマホ双方で幅を変えながら確認できます。修正版は同じURLのまま差し替えられるので、ブレークポイント調整のたびにリンクを送り直す手間がありません。
よくある質問
2カラムが狭い画面でも横並びのままです。
flexで横並びにしただけでは折り返しません。親にflex-wrapで折り返しを許可し、各カラムに幅を与えて合計が親幅を超えるようにするか、メディアクエリで縦並びへ切り替えてください。
要素が重なってしまいます。
floatベースの場合はfloatの解除漏れが原因のことが多いです。clearfixで解除するか、floatをやめてflexやgridに置き換えると重なりを防げます。
floatとflexのどちらを使うべきですか。
新規であればflexやgridが扱いやすく、折り返しの制御も簡単です。floatは回り込みの制御や解除が必要で手間がかかるため、置き換えを検討する価値があります。
ブレークポイントはどこに置けばよいですか。
固定値にこだわらず、コンテンツが窮屈になる幅を基準にしてください。モバイルファーストで1カラムを基本にし、広い画面でだけ2カラムにすると破綻しにくくなります。
原因が分からないときはどこから確認すべきですか？
まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。