スマホで見ると文字が小さすぎる…！「viewport」を制して、Webサイトを思い通りに操ろう
Webサイトを作っていて、「PCで見るとバッチリなのに、スマホで見るとやたら文字が小さかったり、画面がスカスカだったりする……」なんて経験、ありませんか？
実はそれ、Webサイトの「見え方」をコントロールする「viewport（ビューポート）」という設定がうまくできていないことが原因かもしれません。
今日は、初心者さんが一番最初につまずきやすい、この「viewport」の深掘り設定について、一緒に紐解いていきましょう！
—
そもそも「viewport」って何者？
viewportを一言で言うと、「Webページを表示する舞台の大きさ」のことです。
たとえるなら、大きなキャンバス（Webページ）を、小さなスマホという額縁で覗き込んでいるようなイメージですね。設定を何も書かないと、スマホという額縁に対して「PCサイズの広いキャンバス」を無理やり縮小して映し出そうとするので、文字が極端に小さくなってしまうんです。
これを「スマホの画面サイズに合わせて、適切に表示してね！」とブラウザに指示するのが、HTMLの`
`タグ内に書くあのおまじないです。
これだけで、ほとんどの場合は解決します。でも、現場では「もう少し細かく制御したい」という場面も出てくるんですよね。
—
user-scalable=no は「禁断の果実」？
たまに、以下のようなコードを見かけることはありませんか？
この最後の `user-scalable=no` という設定、直訳すると「ユーザーによる拡大縮小を禁止する」という意味です。
「デザインを崩したくないから、拡大させたくない！」という気持ちは非常によくわかります。しかし、これ、Webの世界ではあまり推奨されていないんです。
なぜ「拡大禁止」が良くないのか？
想像してみてください。あなたがもし「視力が少し弱い方」だとしたら、文字が小さいサイトに出会ったとき、どうしますか？ 画面を指で広げて、拡大して読もうとしますよね。
そこで拡大ができなかったら……。「あ、このサイト読めないや」と、すぐに閉じられてしまいます。Webサイトは、どんな人にとっても使いやすいものであるべきです。これを「アクセシビリティ」と言います。
`user-scalable=no` を使うのは、Webカメラアプリなど「どうしても拡大するとUIが壊れて操作できなくなる特殊なアプリ」を作る時だけに留めておくのが、プロのたしなみですよ。
—
「画面幅を固定したい！」という誘惑との付き合い方
「スマホなら375pxの幅で固定して、絶対にレイアウトを崩したくない！」と考えることもあるかもしれません。そんな時は `width=375` のように数値を指定したくなりますよね。
でも、今のスマホは画面サイズがバラバラです。iPhoneもあれば、大きなAndroidもあります。ここで数値を固定してしまうと、「柔軟性」というWebの最大の強みが消えてしまいます。
基本はやはり、`width=device-width`（デバイスの幅に合わせる）にしておくのが正解です。レイアウトを崩したくないなら、特定の幅で固定するのではなく、CSSの `flexbox` や `grid` といった、伸び縮みできる技術を使って、「どんな画面幅でも綺麗に見える」ように調整するのが、近道であり、王道です。
—
まとめ：初心者のうちは「これだけ」守ればOK！
いろいろとルールを説明しましたが、今のあなたが迷ったときは、これだけ覚えておいてください。
1. 基本は `width=device-width, initial-scale=1.0` を書く！
2. `user-scalable=no` は、特別な理由がない限り使わない！
3. 幅の固定はCSSで行う！
これだけで、あなたのWebサイトは格段に読みやすく、そして誰にとっても優しいページになります。
Web制作は、細かい設定の積み重ねです。最初は意味がわからなくても大丈夫。「あれ、これ何のためにあるんだろう？」と一つずつ疑問を解いていくうちに、気づけばあなたも立派なフロントエンド・エンジニアになっていますよ。
また何か小さな悩みがあれば、いつでも相談してくださいね。応援しています！
コメント