サイト制作をしていると、初学者の時ほど以下の画像のように、サイトの右側に謎の余白ができることが多いです。
この謎の右側の余白がある時は、大抵横スクロール問題も起きているのですが、
サイト内のどこのコンテンツが原因なのか分からない〜
こういったイライラがあると思います。
そこで、以下のスクリプトを検証ツールの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で実行できます!
すると、全コンテンツにアウトラインがつき、境界が分かりやすくなりました。
これで明らかに横にはみ出ているコンテンツを探していけばいいわけです。
探してみると、以下のフッターなどは明らかに横にはみ出す要因になっていそうです。
こういった固定widthの部分がタブレット時に高確率で横スクロールや右側の余白問題を引き起こしているので、注意したいですね。
私が出しているコーディング演習課題でも、たまに横スクロールしている方を見かけますので、是非今回のスクリプトを試してみて下さい。
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新!被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル!!
他者と差をつけられるポートフォリオが準備できます!
制作会社も使用する専用レビューツールで分かりやすく添削していきます!
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください!
\課題の購入はこちらから/
ご寄付を頂けると今後の更新の励みになります!