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