メディアクエリのトラブル

　メディアクエリは画面サイズや出力デバイスに応じて使用するスタイルシートを変更するものである。が、柔軟な対応をするためにサイズ設定をしっかり行う必要がある。

　簡易的なWeb開発において、一番初めにWebページの領域を確保するためのタグ(以下、pageタグ)を用意する。この際に例えば「width: 960px;」と設定すると、不具合が起こる。PCのような大きな画面で閲覧する場合、960pxちょうどの解像度であれば画面いっぱいに表示、それより大きければ960px範囲外を背景として(基本的にちゃんとした設定にしていれば)画面中央に表示されることになる。ただ、スマホのような小さな画面の場合、サイトの端が切れてしまうことになる。つまり、横幅960pxにしていたならば、解像度が360pxのスマホの場合右側600pxがはみ出してしまう。overflow-xをhiddenなんかにしてしまうとスクロールできないので悲惨である。実は、１年くらいこの問題を解決できずに放置していた。非常にサーバー代が勿体ない。

　今回はレスポンシブなデザインを行うことにした。これにより、上記のトラブルはきれいに解消できた。ただ、スマートフォンに限らずタブレットなどあらゆるデバイスが使用される今の時代では一般的であるようで、相当導入が遅れたという感じがしなくもないので非常に恥ずかしいところである。プログラム言語はCから始めないといけないと思っていた人間であることはある。

レスポンシブなデザイン

　上記のトラブルの根本的な原因は960pxという絶対的なサイズ指定である。つまり、どんな解像度の画面で見ようが960pxは960pxである。あらゆるデバイスの画面の解像度は様々であり、特に低～中程度の解像度にとって960pxの表示は難しくなる。例えば960pxを画面の横幅いっぱいに縮小して表示する設定をした場合、文字や画像が相当小さく表示されてしまうため、読む側が疲れてしまう。某サークルのWebページはそれで開発したので改善がいるかもしれない。レスポンシブなデザインでは、相対的なサイズ指定を行う。

　例えば、pageタグの横幅を「width: 100%」と指定する。そうすると、pageタグの横幅は読み込んでいるデバイスの画面の横幅で設定される。するとページのコンテンツがそのデバイスの画面サイズに合わせた形で表示できるようになるという仕組みである。

　この構想自体は(レスポンシブなデザインという言葉を知る前から)頭に浮かんでいた。が、当然pageタグの大きさを先の相対指定にしたところで、各パーツ(ヘッダー、フッターなど)から文字のサイズに至るまですべてを相対指定にしないと再び画面をはみ出すことになる。そのため、煩雑さを考えてろくに調べずに一年も過ごしてしまったわけである。

フォントサイズとの格闘

　早速取り組もうとしてみたが、文字サイズをどうしたらよいのか分からずに手が止まった。基本的に絶対的なサイズ指定しかしてこなかったために全くやり方が分からなかったのである。どうしても初めての事はつまりつまりになってやる気が減衰してしまうわけだが、今回は何とかGoogleで調べて答えを得ることが出来た。

　遥か昔にリファレンスか何かを見たとき、サイズ指定のうち「px」「em」「small, mediumなど」をよく記憶していた。ここから、具体的なサイズ指定はemでやっていくものかと思っていた。が、少し調べるとvwというサイズ指定があることを見つけられた。これは画面サイズ(viewport, ブラウザの表示範囲)の横幅(width)のうち何パーセントであるかの値である。単純な話、marginやpuddingなどを無視した場合に5vw(%)ならば一行20文字なのだし, 3vwならば33文字である。実際にCSSを設定し、Edgeのウィンドウサイズをいじるとそれに合わせて文字のサイズが変化する。うまい具合である。

メディアクエリを活用する

　別に、PC向け(大きな画面サイズ向け)のデザインはそのままでよいのであって、問題としていたのは小さな画面サイズ向けのデザインなのであった。そこで、「小さな画面サイズ向けにレスポンシブデザインを構築し、大きなサイズ向けには従来のデザインで構築を行う」ことがすぐに決まった。

　実際、多くのWebページがこんな感じで構築されていると思う。PC向けページでは左右にメニューバーがあるようなレイアウト、スマホ向けページでは上にメニューボタンのあるひたすら縦に長いレイアウト、そういうサイトはごまんとある。ページのパーツごとにid付きdivを用意し、元となるPC用のCSSはいつものように絶対的なサイズ指定でスタイルシートを作成する。その後、小さな画面サイズ用のメディアクエリを展開し、全てのサイズ指定を相対的な指定で行うように別の設定を用意する。

　その結果としてこのページが出来たわけである。PC用の表示とスマホ用の表示でデザインが違うはずである(そんなに異なってはいないが)。

iPhone側の問題

　上記のトラブルを長引かせていた要因として、もう一つの問題が同時に発生していたことが挙げられる。こちら側がメディアクエリを指定しても、iPhoneが勝手に自身のサイズと異なるサイズのものを要求してしまう(勝手なことをする)のである。

　これは、すでに登場したviewportの設定をいじることで解決できた。htmlのheadタグ内でviewportを自身の画面サイズにするように命令しておくのである。このタグを挟むだけで通常通りにメディアクエリが適用される。

残った大きな問題

　MathJaxの設定をどうするか。いくらレスポンシブデザインをしようとしても、MathJaxの基本設定では数式をレスポンシブに表示してくれることは無い。おそらくどうにかはできるだろうが、早いうちに解決しないと数式を記述したサイトでその数式が異常に小さくなったり大きく(画面からはみ出るように)なったりしてしまう。