スマホで開いたら横にスクロールできてしまった話: 隠さずに原因を探した
📌 記事の取り扱いについて（公開当時の内容を含みます — タップで詳細）
本記事は公開当時の体験・気づきをまとめたものです。現在のツール数・プラン数・対象年齢・記事数・仕様とは異なる場合があります。最新の内容は各ツールページをご確認ください。ツールや外部サービスの仕様・料金は変更されることがあるため、利用前には各公式情報も併せてご確認ください。記載に誤りを見つけられた場合はお問い合わせフォームよりご連絡いただけると助かります。
ツールを作るとき、私はほぼ常にパソコンの前に座って、パソコンの画面で確認しながら進めています。
「色はこんな感じかな」「ボタンの位置はここでいいか」「文字は読みやすいか」——そういったことを確認する画面は、いつもMacの画面でした。スマホ向けの指定自体は最初から入れてはいたのですが、狭い画面での見え方を細かく見てはいませんでした。
右に余白ができて、横に動いてしまう
トップページをスマホの幅で表示してみたら、右側に余白ができて、画面が横にスクロールできてしまいました。本文は画面に収まっているのに、指で横に払うとページ全体がずれる、という状態です。
見た目としては小さな崩れなのですが、触ると気持ちが悪い。しかも、どこがはみ出しているのかが、見ただけでは分かりませんでした。
まず「隠して」しまった
最初にやったのは、はみ出している部分を切り落として見えなくする、という対処でした。トップに並べていた四角いカードのまわりで、はみ出したぶんを表示しないようにしたのです。
これで確かに横スクロールは消えました。消えたのですが、直したというよりふたをしただけで、後ろめたさが残りました。原因が分からないままなので、別のページで同じことが起きたらまた同じ対処をすることになります。
原因はカードの幅だった
そこで、何が画面の幅を押し広げているのかを探しました。
犯人は、長い文字列でも表でもなく、トップページに並べていた四角いカードそのものでした。カードを並べる指定の作りのせいで、中身が大きいときにカードが縮まず、その分だけ画面より広い幅になっていたのです。並べ方の指定に「これ以上は縮んでいい」という条件を足したら、押し広げが止まりました。
そのうえで、スマホではカードを1列の横長に並べ直しました。正方形のカードを2列で並べるのをやめて、横に長いカードを縦に積む形です。合わせて、絵文字と見出しの文字サイズ、カードの内側の余白も調整しました。狭い画面では、こちらのほうが素直に収まります。
隠す・原因を止める・並べ方を変える、と三段階を踏んだことになりますが、最初から原因を探していれば一段で済んだ話でもあります。
確認は「スマホ幅」と「ページの横幅」で
直したあとの確認は、パソコンのブラウザでスマホの幅に切り替えて表示を見る方法と、ページの横幅そのものを数字で見る方法の二つでやりました。横スクロールが出るときはページの横幅が画面より大きくなるので、数字を見れば「まだはみ出している」が一目で分かります。
見た目だけで判断すると、今回のように「隠しただけ」でも直ったように見えてしまいます。数字で見る手を一つ持っておくと、そこで嘘がつけなくなるのがよかったです。
「使う画面」で確認するということ
作るのはパソコン。でも使う人はスマホかもしれない——そのことは、頭では分かっていたつもりでした。ただ、パソコンの画面で見ている限り、今回の横スクロールには気づけませんでした。
画面ごとに見え方の違いがある、というのは、狭い幅で実際に触ってみて初めてじわっと分かることでした。細かい用語は後追いで覚えていけばよくて、「使う側の画面で確かめる」という感覚のほうを先に持っておきたい、と思っています。
スマホ幅を前提にCSSを組み直すという、もっと根本的な話はスマホを基準に書き直したい、と思ったままのほうに書いています。
← 他の制作記を見る ｜ トップ ｜ お問い合わせ