横スクロール

①特定のビューポートの幅に依存しないようにする。

回避するための手法はいくつかありますが、ここでは代表的な施策を解説していきます。

viewportの記述についての項でも説明しましたが、Googleの推奨する記述は以下の通りです。「content=”width=device-width」ではなく、「content=”width=320」のように数値を入れてしまうことは推奨されていません。

②固定幅要素は使用しない

外枠に対しては、OOpxではなく「width:100%」のように回定値ではない記述がおすすめです。

レスポンシブWebデザインは見やすさを前提とし、デバイスによる流動性、比例性が重要なポイントとなります。サイズに相対的な単位を用いると、横スクロールされにくくなります。

上記の記述においては、トップレベルの枠 (=div) にwidth:100%; を指定すれば、そのdivの幅は画面の11になります。つまり、横スクロールが生じることもなくなるのです。

ただし留意点として、実際に描画される領域については、width100%は中身の幅であることから、borderか余白が加わると、合計値が増えてしまい、はみ出すことになってしまいます。つまり、もともと想定していたwidth : 100%; の幅を超えてしまう場合があります。そのような不具合を防ぐために、boxizingの使用もおすすめします。border-boxを指定すると、widthはpaddingとborderを含んだものとなります。