車の中でスマホから自分のサイトを見て気づいた。ページは幅に合わせて「折り返して」いた

キャンプ場に着いて、車の中で寝袋にくるまりながら、なんとなく自分のサイトをスマホで開いた。
昼間パソコンで直したばかりのページだ。
画面を見て、あれ、と声が出た。

パソコンでは横にきれいに3つ並んでいた写真のカードが、スマホでは縦に1列、上から順に積み重なっていた。
僕は並べ替えなんてした覚えがない。
同じページのはずなのに、誰が縦に直したんだろう。

答えは、ページの中身ではなく、その「見せ方」を決めているCSSというしくみにあった。
今日はこの、画面の幅で姿を変えるページの話をしたい。

中身は同じ1枚。並べ方だけが違う

Webページは、大きく2つの部品でできている。
ひとつは中身そのものを書いたHTML。
もうひとつが、その中身をどう見せるかを決めるCSSだ。

スマホで見たときも、パソコンで見たときも、読み込んでいるHTMLは同じ1枚。
写真が3枚あるなら、その3枚がある事実は変わらない。
変わっているのは、それを横に並べるか縦に積むかという、CSSが決める並べ方だけなんだ。

「ここより狭くなったら」というメモを書いておける

CSSには、便利な書き方がある。
「もし画面の幅が、ある大きさより狭くなったら、この見た目に切り替えて」というメモを、あらかじめ書き添えておけるんだ。
このメモのことを、メディアクエリと呼ぶ。

むずかしそうな名前だけど、やっていることは案外あっさりしている。
広い画面では横に3列。
狭い画面になったら縦に1列。
その2つの見た目を用意して、どちらを使うかを画面の幅にまかせておく、というだけの話だ。

だからページ側は、開かれた画面がスマホなのかパソコンなのかを、いちいち人間が判断しなくていい。
幅さえ分かれば、CSSが自分でどちらの並べ方にするかを選んでくれる。

切り替わる幅を「ブレークポイント」と呼ぶ

横並びから縦積みへ、見た目が切り替わる境目の幅。
これをブレークポイントという。
区切りの点、くらいの意味だ。

どの幅を境にするかは、作る人が決められる。
よくあるのは、スマホとタブレットのちょうど境目あたり、幅640pxのようなところに置く選び方だ。
うちのサイトも、そのあたりを境に横並びと縦積みを入れ替えている。

ためしにパソコンでうちのサイトを開いて、ブラウザの窓を横からゆっくり縮めてみてほしい。
ある幅を過ぎた瞬間に、並びがカクッと縦に切り替わるのが見えると思う。
その折り返しの瞬間が、ブレークポイントだ。

「スマホ版」は、中身を削った別物ではない

ここでひとつ、僕も昔かんちがいしていたことを書いておく。
スマホで見やすくすることを、中身を減らした簡易版を別に作ることだと思っていた時期があった。
でも、そうじゃない。

さっき書いたとおり、読んでいるHTMLは同じ1枚だ。
スマホだからといって、情報が減るわけでも、機能が消えるわけでもない。
同じ中身を、その画面で読みやすい形に並べ直しているだけなんだ。

これは作る側にとってもありがたい。
ページを2つ持つと、直すときも2か所いじることになる。
1枚で両方まかなえるなら、更新も片方で済むし、書き間違いも起きにくい。

作るときの、ちょっとした心がけ

この仕組みに乗るために、僕が気をつけていることが2つある。
ひとつは、スマホでの文字を小さくしすぎないこと。
小さな画面だからと文字まで縮めると、かえって読みづらくなるし、入力欄が小さいと勝手に画面が拡大してしまったりもする。

もうひとつは、横にはみ出すものを作らないこと。
スマホでページを開いたとき、横スクロールが出てくると一気に使いにくくなる。
写真も表も、画面の幅にすっとおさまるように置いておくと、どんな端末でも気持ちよく読める。

一枚で、どの画面にもなじむ

車の中の、手のひらほどの画面。
家のパソコンの、大きな画面。
同じ1枚のページが、その場その場でいちばん読みやすい形に自分から並び替わってくれる。

道具は、使う場所を選ばないほうがいい。
キャンプ道具でもそうだけど、Webページもきっと同じだ。
寝袋の中の小さな画面でも、ちゃんと読めたあの安心感が、この仕組みのいちばんの取り柄なんだと思う。