Webこういう横並びのメニューを実装することってよくありますよね?私はあります。メニューに限らずなんですが、この横並びのレイアウトは組み方によっては「ブラウザで縮小表示した際にレイアウトが崩れる」という現象が起こりうるので、今回はその原因と解決方法をメモしていきます。ブラウザで縮小表示するとカラム落ちしてしまう!以下のようなコードを書いてみます。center;}通常であれば問題なく表示されるのですが、これをブラウザの機能で縮小表示させてみると......こんな風にカラム落ちしてしまいました!すべてのブラウザで確認したわけではありませんが、主要なブラウザのほとんどが同じような挙動になるようです。なくなってたからChromeのデベロッパーツールで確認してみると、なんと興味深い現象が起きていました。拡大されているようです。大きい値の場合は問題なく表示されます。原因は「border-width」がおかしくなることなので「border」を使わずに線を付けるというのが考えられます。「::before」などの疑似要素を使ったりなどですね。border-box;」を指定するのもアリでしょう。最新ブラウザしか対応しないのであればいっそ「flex-box」で組んでしまうのも手かもしれません。組み方によってできるものとそうでないものがあるので、そのときに応じて対応策を試すしかなさそうです。サンプルをアップしましたので、縮小表示して挙動を確認してみてください。要素を横並びにする際はちょっと気を付けましょう、というお話でした。関連記事iPhoneでスクロールするとresizeイベントが発生してしまう問題スマートフォンサイトでresizeイベントというと、画面を回転させた時くらいであまり使う場面はないように思えますが、レスポンシブサイトなんか...記事を読むPHPでHTML文書を解析するつい先日、すでに書かれたHTML文書から情報を引っ張ってっこなくちゃいけない事案が発生してしまいましたので、その方法をメモしておきます。指定が効かない時の回避...記事を読むエディター「Atom」にインストールしているプラグインとテーマ【ネタバレあり】『打ち上げ花火、下から見るか?横から見るか?』見てきました。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。まことゆったりした日々を送ってます。普段はフロントエンドエンジニア・Webデザイナーをしております。ブラウザで縮小表示すると小数点が出てくる?【ネタバレあり】『打ち上げ花火、下から見るか?横から見るか?』見てきました。横からスライドするドロワーメニューのjQueryプラグイン作りました。果報は寝て待ってられない!.。