画面幅に合わせる

Web ページには、紙と決定的に違うところがある。見る人の画面の大きさが分からないということだ。5インチのスマホかもしれないし、27インチのモニタかもしれない。同じページが、10倍近く幅の違う画面で開かれる。

紙なら「A4」と決めてその中で設計できる。Web ではそれができない。だからページのほうが、開かれた画面に合わせて姿を変える必要がある。これが レスポンシブ と呼ばれる考え方だよ。

やり方の中心が メディアクエリ だ。「画面幅が○○px より狭いときは、この指定を使う」と条件をつけて CSS を書ける。狭いときは縦に積み、広いときは横に並べる。HTML は1つのまま、見せ方だけを切り替えるのがポイントだよ。スマホ用のページを別に作るわけではない。

切り替える幅の目安を ブレークポイント と呼ぶ。よく使われるのはタブレットとPCの境目あたりだけれど、機種ごとに合わせようとするときりがない。レイアウトが崩れて見える幅を実際に確かめて、そこで切るのが現実的だよ。

もうひとつ重要なのが、どちらを基準に書くか。狭い画面を基準にして、広いときに足していく書き方を「モバイルファースト」と呼ぶ。この教材はその立場を取っている。理由は単純で、狭い画面のほうが制約が厳しいからだ。狭いほうを先に成立させておけば、広い画面は余裕を配るだけで済む。逆をやると、狭い画面に押し込む段階で行き詰まる。

章の後半では、幅を追いかける 指定を扱う。画面幅の何割、という指定のしかたや、大きくなりすぎないよう上限を決める指定だ。文字の大きさも画面に応じて変えられる。段階的に切り替えるのではなく、なめらかに追従させるやり方だよ。

作ったものを確かめる方法も覚えておこう。ブラウザの幅を実際に狭めて、崩れる瞬間を探す。横スクロールが出たら、それは何かがはみ出しているサインだ。スマホで横スクロールが出るページはとても使いづらいので、必ずつぶしておきたい。

はみ出しの原因でいちばん多いのが、幅を固定した要素だ。「幅300px」と書いた箱は、画面が280pxしかなくても300pxのまま居座る。だから横スクロールが出る。幅は固定せず、「画面に対して何割」や「最大でもここまで」という形で指定するほうが安全だよ。長い文字列や大きな画像がはみ出すこともあるので、そこも確かめておこう。

もうひとつ忘れがちなのが、画面の幅をブラウザに伝える指定だ。これを書き忘れると、スマホはページをPC幅とみなして全体を縮小表示する。文字が小さすぎて読めないページは、たいていこれが原因だよ。HTML の先頭に1行書くだけなので、忘れずに入れておこう。

この章は、実務でいちばん時間を使うところでもある。「PCでは完璧なのにスマホで崩れる」は、Web 制作で最もよく起きる問題だよ。ここを押さえておくと、そのたびに困らずに済む。

画像の扱いも忘れずに。大きな画像をそのまま置くと、狭い画面ではみ出す。「親の幅を超えない」という指定をひとつ入れておくだけで防げるので、癖にしておこう。

この教材では、書いたコードのプレビューの幅を切り替えられるようになっている。狭い幅と広い幅を行き来しながら、どこで崩れるかを自分の目で確かめてみよう。画面幅を変えたときに何が起きるかを見る習慣が、この章でいちばん持ち帰ってほしいものだよ。

そしていま、あなたはスマホでこの教材を読んでいるかもしれない。作る側に回っても、その視点は忘れないでほしい。使う人の多くは小さな画面で見ている。そこで気持ちよく使えることが、まず最初の目標だよ。