先日から、友人がやってる店のウェブサイトを作っている。
下手したら10年ぶりくらいのタグ打ちサイト作りで、HTML5とかハイカラなものは全然知らないもんで、まあ素朴な代物ではあるのだけど。
中部圏のサイクリストの方、スポーツサイクルに興味ある方は、こちらオガワサイクルへ。
仕事が真面目で腕も確か。これから始めたい人からベテランまで、一度お立ち寄りください。
物腰柔らかい好青年なので、まったくの初心者でも怖がる心配ありません。
以下能書き。自転車とは特に関係ない。
で、このサイト、技術的には大したことはやっていない、XHTMLとCSSだけでできたシンプルなサイト。
ただ一点、「どんな端末でもそれなりに見えて使える」というサイトにしたかった。
最近、スマホでウェブ閲覧してる人を見てると、どうも酷く見づらそうで。
字のサイズが合わないから拡大縮小し、画面からはみ出すからスクロールし、リンクをタップしたのが空振りするからやり直して、と。
PCで見ようがタブレットで見ようがPCで見ようが、完全に適切とは無理でも、それなりの格好にしたい。
で、どのようにしたかというと、寸法の指定が必要なところをなんでも%指定するようにした。
画像とかブロック要素は画面幅に対して、文字サイズはブラウザの設定値に対しての相対値になるから、どんな表示装置のデバイスでも、表示装置の寸法・解像度に合わせた表示になる。
ヘッダのタイトル画像は幅100%。左ペインのリンクボタンは30%、右ペインは70%。
PC版chrome、Internet Explorer 11、FireFox、Android版chrome、標準ブラウザいずれでも、何も問題なく同じような表示がされる。
また、ブラウザーのウィンドウの幅を詰めれば全体的に小さくなるし、広げれば大きくなる。このサイズ変更に対する追従、ちゃんと行われるか心配だったけど、PC版chrome、Internet Explorer 11、FireFoxのいずれでも追従する。
PCでブラウザーを最大化した時には、さすがに広くなりすぎてみっともない。
どうにかしたいと思ったら、今はmax-widthなんてCSSプロパティがあったので、900pt(ポイント)を最大値としておいた。計算上317mmが最大幅になる。
もっとも、Windows PCをそのまま使ってる場合は、もう少し狭いところで最大値にかかる。900pt = 1200ピクセルが最大値になる。（なぜそうなるかは、理屈は難しくないけど計算が面倒で説明が長くなるので省略）
こうした結果、PCでもスマホでもタブレットでも、四方八方にスクロールしなくちゃいかんとか、拡大しないと読めないとか、そういう問題は起きてない。
また、スマホではリンクをタップしたつもりが狙いがズレて何度もやり直す、といった様子もよく見られる。
これについても、（一部twitterなど外部サービスを埋め込んだ部分を除き）リンクを文字列ではなく、ある程度の大きさの画像とした。これでミスタップは減るはず。
Android 4.2のホーム画面ではアイコンが7つ並んでいるから、それくらいのサイズがあればあまり失敗しないと見込める。今回はそれ以上の大きさ。
やってしまえば、何ら難しいことではなかった。
まあ、px指定とか物理長さ(mmとかptとか)指定だったらいきなり指定するだけだけど、%指定の場合は親要素の大きさに対しての相対指定となるから、少しややこしくはなるけれど。指定を省略しても適当にやってくれたりしないことが多い。
それでも難しいというほどではないはず。
これでとりあえずユニバーサルデザインというか、デバイスを選ばない表示にはなっていると思う。
でも、どういうわけか、%指定でサイトを作ってるところはあまり他では見かけない。
昔ながらのpx指定のサイトのままで、ユーザーに拡大縮小を任せているか、あるいはスマホ用にまったく別デザインのサイトを表示するようにしているか。
同じサイトを同じように表示しようというのは、不思議と少数派らしい。 なんでなんだろう？
で、「なんでなんだろう？」と自分で書いたけど、実のところ「全部%指定」って、実際やってみるまでは自分でも、かなり気持ち悪いというか心理的抵抗があった。
古くからコンピューターを触ってた人ほどそうだと思うんだけど、コンピューター上で最優先される長さの単位ってやっぱりピクセルだろう、という感覚がどうにもこうにも抜けない。
MS-DOSを使っていた頃は、画面のピクセル数は640x400だった。（昔はピクセルなんて言わずにドットと言ってたけれども）
Windowsを使えるようになって、モニターが物理的にも大きくなったけれど、それよりもピクセル数が1024x768とか1152x864に増えたことが、操作上の「広さ」を感じさせることだった。
Windowsの方もピクセル単位で画面を取り扱ってる時代が長くって、確かXPまではタイトルバーとかスクロールバーとか、そういうものの大きさをピクセル単位で指定できたものだった。（7でもできたっけ？）
そんな環境で、ウェブサイト作ろうとか絵を描こうとか考えたら、嫌でもピクセル単位で大きさを考えてしまう。
デジカメの写真だって、「1600x1200の200万画素」とか、明らかにピクセル思考がある。
印刷する時には「A4一杯にした時に何万画素あれば解像度何百dpi」とか考えることもあるけれど、これだってピクセル基準で考えてるからそういう換算が必要になるわけで。
それでユーザーの方もピクセル思考が染み付いてたんだけど、長らくそれで大した不都合もなかった。
端末なんてほとんどPCだったんだから、ピクセル数はWindows XP時代で1024x768から1600x1200くらい。ワイドを入れても1440x900とかで、さほど幅広くない。
モニターのサイズも、ノートで10～15型、デスクトップでまあスクエアで19型、ワイドで21型くらい。ノートのほうが見る距離が近いから、見た目の寸法差はかなり狭まる。やはりさほど幅広くない。
それで、例えばウェブサイトの幅を760pxと決め打ちしても、問題になることのほうが少なかった。
PCユーザーってのはそれくらい、ピクセルに魂を引かれた人々だ。
しかしまあ、現にAndroidやIGZOの出現で、画面のサイズも解像度も格段に広がってしまった。
下は3.5型、上は14型3200x1800とか。
そんなもんで、相変わらず横幅760pxとかやってたら、そこらじゅうで破綻してしまう。
ピクセルという眼鏡で現在のモニターは覗けやしないのだ。
そろそろ、進歩を忘れた古いPC人を脱却せねばならん時代だ。