8解せぬ、なぜ動くのだ・・・。Safariで開くと、幅はだいたい収まっているけれど、画面が左右に動いてしまう状態に。おかしいなとスタイルシートの参考書を見返したら、初歩的なところを勘違いして覚えていたのが原因だった。自作テーマでスマホ対応できた!と思いきや画面が左右に動いて気持よくない・・・。paddingは”widthを広げる外向きの余白”原因は「paddingを内向きの余白だと思っていた(widthの外には加算されないと思い込んでいた)こと」。”ボックス”の概念をすっかり忘れていた(超初歩的)。コンテンツを内包するdivのwidthを98%くらいにしてpaddingを13px、とか設定していたものだから「widthが100%を超えていないのになんで画面に固定されないんだ?」と思っていても、width:98%にpaddingで26px加算されるとボックスの横幅が100%を超えてしまう。”ボックス”を忘れて勘違いしていたpaddingの扱いのイメージ正しいpaddingのイメージ。Safariでスマートフォン表示させようと思ったときはwidthの幅を意識するのではなく、コンテンツを内包する要素(bodyだったりdiv.containerだったり)の横幅を(100%以内に収まるよう)意識しなければならない。ExplorerはIE9まで他ブラウザと異なりpaddingを内向きの余白と解釈されていた)。スマホ向けのスタイルシートを作る際は、divにwidthとpaddingを併用せず、divにwidthとmargin、pなどにpaddingを使用すると作りやすい。追記:スマホレイアウトで画面がグラグラ揺れるの、直しましょう!原因別対処法スマホが普及した今、アクセス解析をしたらサイトの閲覧環境にしめるスマホの割合も半分を超えているのでは?サイトがグラグラ横に揺れていてはリピーターを減らしてしまうかも。もったいない!直しましょう!当ブログでもスマホ対応した当初はあれこれ「解せぬ。」と試行錯誤してました。Queriesなどでスマホ向けスタイルを指定しているものと仮定して書いています)。見出しタグ(h)や文章(p)タグがはみ出てる!>box-sizingを使ってみるh1やh2など、見出しのデザインが画面の幅を超えているときは、CSSの”box-sizing”プロパティでpaddingの振る舞いを反転させてみます。前述した”勘違いしていたpadding”のイメージ通りになるかもしれません。CSSのbox-sizingプロパティの設定によって、paddingの扱いは変化します。デフォルトでは”content-box”が適用されています。標準仕様に於ける規定値。プロパティの寸法は、コンテンツ領域のみを含むものとなり、パディング、ボーダー、マージン領域を含みません。プロパティによって定義される領域内にパディング領域及びボーダー領域が含まれます。マージン領域は含まれません。選択した際はこの計算方法が採られます。MDNAdSense広告がはみ出てる!>レスポンシブ広告に置き換えるあちこちブログを拝見していて多いのがコレ。サイトのデザインもきれいなのに、広告のせいでグラグラ。ここだけ見直すと直るサイトも多いはず(レクタングル大が収まる解像度のスマホを使っていると気付きにくいかもしれません。Chromeのデベロッパーツールを使って一度チェックをおすすめします)。手っ取り早い対処法は、幅320px(5sまでのiPhoneの幅ピッタリに収まります)に収まるようなサイズの広告に切り替えること。これだと6以降のiPhoneや、大画面Androidスマホで見たときにサイズが小さく、インパクトに欠けます。これを機会に「レスポンシブ広告ユニット」に入れ替えるのをおすすめします。デバイスサイズに合わせて最適なサイズの広告を表示してくれます。AdSenseヘルプ:レスポンシブ広告ユニットについてレクタングルや横長、縦長、など広告の形状を任意に指定したい場合は一部コードを書き換える必要があります。いう値が設定され、これにより、レスポンシブ広告ユニットでサイズの自動調整が有効になります。)に変更すると、レスポンシブ広告ユニットで一般的な形状を設定できます。記事に埋め込んだ画像やiframeがはみ出てる!>ならばよろしい、max-widthだ。YouTubeやGoogleMapsの埋め込み要素の幅が原因になっている場合は、スタイルシートを使って問答無用で収めます。当サイトのスタイルシートの一部を抜き出すと、こんな指定をしています(記事中にアップロードした画像も幅いっぱいになる指定です)。max-width:100%;clear:both;margin-left:auto;margin-right:auto;margin-bottom:8px;}}これでだいたいオッケーです。G-toolsやA8.netの、大きめの商品バナー画像なども、幅いっぱいに収まるようになります。余白を持たせたい場合はmax-widthの値を小さくします。当サイトのベストプラクティス他サイトのスマホ向けスタイルシートを見ていると、bodyやdiv.containerなどにmargin、paddingを指定されているところもあるのだけど、当サイト(記事執筆時)では、コンテンツを内包する要素にmargin、paddingは使用しない(PC向けスタイルシートで指定したmargin、paddingをスマホ向けでは0に指定してリセットしています)ことにして、見出しタグや文章タグなどに個別にスタイルを指定する方法を取っています(その方が考えることが少なく済むので)。目で見て楽しむデザインの本。Designerの使い方メモFireworksからPhotoshopへ。SC「今なおシンプル」が最大の魅力。reserved.当サイトでは利便性向上や閲覧の追跡のためにGoogle・他提携サービスによりCookieが使用されています。サイトの閲覧を続けた場合、Cookieの使用に同意したことになります。