2022年3月24日のブックマーク (1件)

  • Webサイトで予期せぬ横スクロール発生時はConsoleで一発判定

    Webサイトを作成しているとブラウザで予期せぬ横スクロールが発生してしまうことがある。 ブラウザで予期せぬ横スクロールが発生するのはCSSで幅の計算などを間違えて表示領域を超えてしまうことが原因だ。 例えばこちらのサンプルをブラウザで見ると横スクロールが発生している。 横スクロールが発生している原因の要素 一般的に横スクロールが発生している要素の確認する際はCSSの全称セレクタ(ユニバーサルセレクタ)でoutlineを付けて確認されることが多い。 * { outline: 1px solid red; } しかし、CSSに追加するのは若干面倒なのでブラウザのデベロッパーツールのConsoleで以下のJavaScriptを実行したほうが簡単にoutlineを追加できる。 $$("*").forEach(v => v.style.outline = '1px solid red') outli

    Webサイトで予期せぬ横スクロール発生時はConsoleで一発判定
    norip44
    norip44 2022/03/24
    横スクロールが出て、崩れているときに確認したい。