レスポンシブサイトをつくるとき、今どきは普通のブラウザにもスマホ表示のプレビューができる機能がついていたりして、大変便利ですが、実際のスマホで表示してみると、hoverやスワイプの挙動なんかでつまづいてしまうことがあります。

「スマホ表示がおぼつかなくなる」というのは、縦にスクロールするときに、画面が左右にブレて、画面外の余白が表示されてしまうという、機能的に不都合はないんだけど、なんとも気持ち悪い状況。

原因はわかってるんです。要素が画面幅からはみでてるから。私などは、htmlもcssもエディタで端から書いていくので、この手のミスをよくします。そういうときは、

overflow-x: hidden;

をbody要素に加えればとりあえず解決です。横スクロールをしなくなるので、要素がはみ出ても問題なし。

のはずだったのですが、これをやったら、実装してあった「上にもどるボタン」のjavascriptが動かなくなりました。なんでだろう。y方向は問題ないと思うんだけどなあ。

これは真面目に考えれば原因がちゃんとわかるんだろうけど、まずははみ出てる要素をちゃんと探した方がよかろうと思い、ブラウザのインスペクタ機能を使って、CSSをチェックしました。ところが自分で書いたCSSなのに、テキストの羅列を眺めているだけでは、なかなか見つけられないものです。トシなのかな。

こんな時、目と頭がぼんやりしてても原因が見つけられるように、私は各要素に、

display; none;

を加えながらチェックします。だいたいサイトはヘッダとメインコンテンツ、フッタくらいの大要素に分けてありますので、大きな要素を順番に非表示にしていきます。非表示にしたとき、横にブレなくなったら、その要素内に原因があるということ。そうやって、原因を絞り込んでいきます。

box-sizing: border-box;

これが使えるようになってから、この手のミスは大分減ったのですが、今回は、width: 100%の要素に左右のmarginが設定されていたのが原因でした。こういうチェックをやりやすくするために、CSSファイルは要素のレベルごとにかためて書く、というのも意外と大事なことかもしれません。