サイトのデザイン・コーディングをしていると、様々な不具合が起きるのはよくあることですが、画面の崩れなどが起きてしまっているとユーザビリティの低下にもつながる可能性があるため、早急に改善したい部分です。
そのような中でも気づかないうちになりやすいものとして、今回は画面が左右に動いてしまったり、ぐらつく時の修正方法を紹介します。左右のブレは特にレスポンシブデザインでサイトを作成したときやスマホサイトを作成したときに良く起こる不具合ですので、同じようなところで詰まってしまった場合には参考にしてみてください。
レスポンシブデザインで画面が左右に動く時の原因・対処方法
レスポンシブデザインでサイトを作成した場合、以下のような原因で画面が左右に動くことがあります。
原因例①：解像度が400pxの端末を使用している時に、450pxの画像を幅指定せずに表示している場合
原因例②：画面幅とコンテンツ幅は100%になっているが、コンテンツを囲う枠線を指定している場合
それぞれの問題が発生したとき、下記のような修正を行うことで改善されます。
解決例②：画面幅=コンテンツ幅＋枠線の太さに変更（※「border:1px solid #ddd;」等の指定をしている場合は、
コンテンツ幅を「width:calc(100% – 2px);」にして、コンテンツ幅を100%;以内に収める）
上記のように、画面幅＜コンテンツ幅になっている時に画面のぐらつきが発生します。コードがかなり長文の場合、知識があっても該当部分を探すのも面倒なので、早めの対策・修正を行うようにしましょう。
WordPressのLION MEDIAテーマで同じ事象が発生した場合
私はブログサイトを運営する際、LION MEDIAテーマの使い勝手が良く愛用しているのですが、ある特定の設定にした場合に、この記事で紹介しているような画面が左右に動く原因を起こすコンテンツがありますので、その部分と対策を紹介しておきます。
該当のコンテンツは、スマホ版表示した場合の下図のような同カテゴリの記事一覧コンテンツになります。
こちらのサイトには100以上の記事がありますが、今までにこの事象が発生したものはこの記事だけでしたので、ごくまれに起こる現象だと思います。
「.heading a{width:100%;}」
既にaタグに「display:inline-block;」の指定がされているため、幅指定のみで対処できます。
まとめ
レスポンシブサイトではPC・タブレット・スマホのすべての端末できれいにページを表示させるため、コンテンツ幅を絶対値である「pxやpt」ではなく、%指定で作成することが多いです。ただ、サイトのコーディングを行う中で使用頻度の高い枠線については%での指定が現状できないため、サイズ指定の際に計算式を使用できる「width:calc();」の設定をおすすめします。
