スマホを基準に見た目を書き直した話: 画面の幅の指定と、広い画面用を足す向き
📌 記事の取り扱いについて（公開当時の内容を含みます — タップで詳細）
本記事は公開当時の体験・気づきをまとめたものです。現在のツール数・プラン数・対象年齢・記事数・仕様とは異なる場合があります。最新の内容は各ツールページをご確認ください。ツールや外部サービスの仕様・料金は変更されることがあるため、利用前には各公式情報も併せてご確認ください。記載に誤りを見つけられた場合はお問い合わせフォームよりご連絡いただけると助かります。
サイトを公開してアクセスの様子を眺めていたら、スマホから来ている人のほうがずっと多いことに気づきました。それなのに自分は、画面の広いPCを前にしてCSSを書いていたので、「順番が逆だったかもしれない」と思うようになりました。そこで、CSSをスマホ基準で書き直してみることにしました。狭い画面のスタイルを土台にして、広い画面用を後から足していく形にしたら、自分でも追いやすいコードになった気がしています。
画面の幅の指定でつまずいた
スマホで開いたときに、ページ全体がぎゅっと縮んで表示されてしまう時期がありました。原因を調べたら、画面の幅に合わせて表示するための一行を、ページの頭に入れ忘れていたようでした。これがないと、スマホでもPC向けの幅で表示しようとして、ページ全体が縮んで見えることがあるようです。
このとき、指で拡大できないように禁止する書き方も見かけたのですが、私は使わないことにしました。文字を拡大して読みたい人を、自分の都合で締め出してしまう気がしたからです。このあたりの「勝手に絞らない」感覚については、日本語サイトのアクセシビリティで気をつけたことで別に書いています。
あと、画面の端まで使う最近のスマホだと、ノッチや下のバーの近くに本文が寄りすぎることがあったので、本文の余白を少し広げて、画面の端に寄りすぎないようにしました。正直まだよく分かっていない部分もあるのですが、これで困らなくなりました。
広い画面用を足す向きを反対にした
それまでは「PC用が基本で、狭い画面のときだけ後から上書きする」という書き方をしていました。これだと、狭い画面のために一度書いた見た目を、別の場所で打ち消す記述がどんどん増えていって、自分でもどれが効いているのか分からなくなっていました。
そこで向きを反対にして、狭い画面を基本にして、広い画面用を後から足していく形に変えました。たとえば一覧の並びは、まず1列で書いておいて、画面が少し広いときは2列、もっと広いときは3列、という具合に増やしていきます。打ち消しがほとんど消えて、頭の中の整理と中身が一致した感じがして、これは気持ちよかったです。
指で押す領域を広げた
PC前提のころは、リンクやボタンが小さくても気にしていませんでした。でもスマホで自分のサイトを触ってみると、隣のリンクを誤って押してしまうことがたびたびあって困りました。
押しやすい大きさには目安があるらしいので、ボタンには共通で最低限の高さを持たせるようにしました。このあたりは見た目というより「指で操作する人が困らないか」という話なので、アクセシビリティの記事のほうにも近い内容を書いています。
カードのまとまりでは、カード全体を押せるようにして、小さなリンクを狙わせずに済むようにしました。ただ、カードの中にさらにリンクやボタンを置くと、リンクの中にリンクが入っておかしくなることがあったので、そこだけは気をつけています。
横スクロールが出て焦った
スマホで見たときに、なぜか右側に余白ができて横にスクロールできてしまうことがありました。最初はとりあえず横スクロールを隠す書き方で済ませようとしたのですが、それだと原因が隠れるだけで気持ち悪かったので、何がはみ出しているのかを一つずつ探しました。だいたいは長いURLや表が原因で、そのはみ出している要素を画面の幅に収めると、すっと収まりました。
表はそもそもスマホだと幅が足りないので、狭い画面では縦並びに崩す書き方を足しています。中身によっては、無理に縦に崩さず横スクロールを許したほうが見やすい表もあって、そこは一律にせず使い分けています。長い文章の折り返しまわりの細かい調整は別の話になるので、文字組みの込み入った調整については別の記事に分けて書こうと思っています。
ホバー前提をやめた
PCでは、マウスを乗せたときに説明を出す、みたいな見せ方をしていました。でもスマホにはホバーという動作がないので、乗せて初めて見えるものは、スマホの人には永遠に見えないことに後から気づきました。
そこからは、タップで開け閉めできる形に置き換えるようにしています。もともと用意されている、タップで開け閉めできる仕掛けを使うと、自分で複雑な処理を書かなくても開閉できて楽でした。どうしてもホバーの演出を残したいところは、マウスを乗せられる環境のときだけ効かせるようにしています。
結局は実機で見るのが早かった
新しいページを作ったら、ブラウザの開発者ツールでスマホ表示に切り替えて確認しています。ただ、それで大丈夫そうに見えても、実際のスマホで開くと崩れていることがあって、最後は手元の端末で見るのがいちばん確実でした。スマホを基準にする癖がついてからは、結果的にPC表示のほうも前より素直になった気がしていて、順番を入れ替えてよかったと思っています。
← 他の制作記を見る ｜ トップ ｜ お問い合わせ