width: 100%; を指定

レスポンシブWebデザインは見やすさを前提とし、デバイスによる流動性、比例性が重要なポイントとなります。サイズに相対的な単位を用いると、横スクロールされにくくなります。
トップレベルの枠(=div) に width: 100%; を指定しましょう。そうすれば、横スク ロールが生じることもなくなるのです。 ただし留意点 として、 実際に描画される領域については、 widthl00% であることから、 border か余白が加わると、 合計値が増えてしまい、はみ出すことになってしまいます。つまり、もともと想定して いた width: 100%; を超えてしまう場合があります。そのような不具合を防ぐために、 boxizing の使用もおすすめします。border-box を指定すると、 width はpadding とborder を含んだものとなります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です