メッセージの編集
お名前
本文
*{margin:0 auto;} リセットCSSかもしれませんが*での指定はあまり良くないと聞いたことがありますし、値も意味がよくわからない為下記のように書き換えてください。 body,div,img{ margin:0; padding:0; } 面倒でもリセットが必要な要素ひとつひとつを,で区切って上記のように指定してください。 パソコンモバイル両方、body{〜}のpadding〜の行は削除してください。 パソコン向け、モバイル向けともbody{〜}からpaddingを削除したので.allのボックスの幅は前より広がると思います。 パソコンでは、あまり気にならないようなら幅はそのままで.allにmargin:0 auto;(ボックスのセンタリング)を追記。気になるなら.allの幅をwidth:470px;にしても良いと思います。 ただしパソコンでの横スクロールについての解決になるかどうかは分かりません。 試されたのは平仮名や漢字の入った日本語でしょうか?英数字の羅列だとボックスの幅を無視して中身がはみ出してしまうと思いますが…。 モバイル向けは.allにwidth:○%;とmargin:0 auto;を追記。paddingは10pxとなっていますが携帯とスマホでは同じ10pxでも画面の横幅に対する余白の量が変わってきますので、出来れば%での指定が望ましいと思います。 例) .all{ widh:80%; margin:0 auto; padding:5%; border: 1px solid #dddddd; 以下略 上記のようにするとボックスの幅80%+左右padding:10%+ボーダー左右2px+画面端からボックスまでの距離(auto)=100%となり上手く収まります。 詳しくは「横スクロール」で検索してください。
編集パス
編集
記事削除
- ナノ -