Web制作実務役立ち

サイトの右側に謎の余白?HTML/CSSの横スクロールの解決方法【はみ出たコンテンツの位置特定スクリプト】

サイトの右側に余白?HTML/CSSの横スクロールの解決方法【はみ出たコンテンツの位置特定スクリプト】
本ページにはプロモーションが含まれています。

サイト制作をしていると、初学者の時ほど以下の画像のように、サイトの右側に謎の余白ができることが多いです。

サイトの右側に余白?HTML/CSSの横スクロールの解決方法【はみ出たコンテンツの位置特定スクリプト】
https://www.city.sakata.lg.jp/

この謎の右側の余白がある時は、大抵横スクロール問題も起きているのですが、

まさひろくん

サイト内のどこのコンテンツが原因なのか分からない〜

こういったイライラがあると思います。

そこで、以下のスクリプトを検証ツールConsoleから実行してください。

検証ツールの開き方

Windows:Ctrl+Shift+I
Mac:Command + Option + I

// ウェブページの幅を取得
var w = document.documentElement.clientWidth;
// 全ての要素を取得
var elements = document.querySelectorAll("*");
// 要素をループして、指定の条件を満たすものを探す
elements.forEach(function(v) {
  v.style.outline = '1px solid red';
  if (w < v.clientWidth) {
    console.log(v);
  }
});
しょーご

コードを貼り付けたら、Enterで実行できます!

すると、全コンテンツにアウトラインがつき、境界が分かりやすくなりました。

これで明らかに横にはみ出ているコンテンツを探していけばいいわけです。

探してみると、以下のフッターなどは明らかに横にはみ出す要因になっていそうです。

サイトの右側に余白?HTML/CSSの横スクロールの解決方法【はみ出たコンテンツの位置特定スクリプト】

こういった固定widthの部分がタブレット時に高確率で横スクロールや右側の余白問題を引き起こしているので、注意したいですね。

実際このサイトは固定widthだらけで、これだけでは解决しませんが、見つけ方の例として使わせてもらいました。

私が出しているコーディング演習課題でも、たまに横スクロールしている方を見かけますので、是非今回のスクリプトを試してみて下さい。

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください!

しょーごログ-コーディング課題のレビュー
レビューの様子

\課題の購入はこちらから/

応援して頂ける方へ

ご寄付を頂けると今後の更新の励みになります!

🍺 ビールをプレゼントする

あなたに是非読んでほしい記事です!
});