謎の横スクロール
コーディングを行うにあたって、要素がページからはみ出しているという問題が生じることがあります。
この問題を解決するために、「*」セレクターを使用してはみ出している要素を割り出し、修正する方法を解説します。
【Step 1】「*」セレクターについて
「*」セレクターは、Webページ内の全てのエ要素を指定するセレクターです。
このセレクターを使用することで、Webページ内の全ての要素に対して同じスタイルを適用することができます。
【Step 2】コンソールを使用したはみ出しチェックの方法
はみ出している要素を割り出すために、デベロッパーツールを開き、コンソールを使用します。以下のコードを入力することで、はみ出している要素を赤枠で囲んで表示することができます。
$$("*").forEach(e => e.style.outline = '1px solid #eee') このコードを実行することで、ページ内のはみ出している要素を即座に割り出すことができます。
【Step 3】はみ出しチェックの修正方法
はみ出している要素を修正するには、マージンやパディングの設定を調整する必要があります。はみ出しの原因がマージンの設定にある場合は、マージンを減らすことで解決することができます。はみ出しの原因がパディングの設定にある場合は、パディングを増やすことで解決することができます。
おすすめプラグイン
しまぶーのIT大学というYoutubeチャンネルを運営されているしまぶーさんが開発した便利なプラグインがあります。
Chromeの拡張機能ですが、ボタン一つで要素のはみ出しが一目でわかります。
【まとめ】
コーデイングにおいて、はみ出している要素は非常に重要な問題です。
これを解決するために、デベロッパーツールを使用してはみ出している要素を割り出し、マージンやパディングの設定を調整することができます。
この方法を使用することで、より美しくバランスの取れたWebページを作成することができます。
【参考文献】
iwb.jp 様
https://iwb.jp/website-unexpected-horizontal-browser-scrolling/
