2011年にはMobile Firstという手法が浸透した。当初は多分に技術的な事情によるもので、先に低解像度向けのスタイルを書くことによって、高解像度向けのスタイルで使われる大きな画像を読み込まれないようにするというテクニックでしかなかった。しかし、結果としてコンテンツ重視でCSSを書きやすくなることがわかり、急速に浸透することになった。Media QueriesはそんなMobile Firstの中核をなす技術だが、その使われ方は限定的なもの(ほぼmin-widthとprintだけ)だ。2012年にはそこらへんも変わってくるんじゃないかと思う。
@media screen and (min-width: 481px) {
/* do something */
}こういった強く「スマートフォン」を意識した書き方をするのではなく、コンテンツに応じて切り替えポイントを探る必要があるだろう。例えば一行の文字数が大きく変化しないように解像度に合わせてフォントサイズとコンテンツの幅を調整してやるとか、サイドバー(多くの場合固定のサイズだろう)とコンテンツの幅のバランスを考慮して一定の比率を切ったらサイドバーを下に移動させるなどだ。今後は多段カラムを採用して横幅に応じてカラムを増やしていくなどというのもありになっていくだろう。
モバイル機器の多様化は勿論、そもそもデバイス種の判別が非常に難しくなっている現在、メジャーなデバイスの解像度を利用してデザインを切り替えるのは明らかに無理がある。ということで今年はデバイスをターゲッティングしないMedia Queriesへの移行が進むのではないか。
最近になって「よく知られたサイズ」は意識しない方が良い的なことに触れている記事をよく見かけるようになったので、解像度によってフォントサイズとコンテンツ幅を調節するCSSを例にしてこんな感じで始めて書こうかなと思っていたら、Vertical Media Queries & Wide Sitesというほぼまんまなエントリを先に発見してしまった。
このエントリでは十分な高さがありかつ横幅が広い場合にフォントサイズを拡大している。横幅の計算は特にデバイスを意識せず、コンテンツを意識した形で決定しているようだ。高さについては11''のMacBook Airを意識しているようでそこはちょっと残念だが、このmin-heightを利用したMedia Queriesは注目に値する。例えばはてなの共通ヘッダーのようなものを高さに余裕がある場合は固定するが余裕がなければ固定しないなどできるだろうし、ソーシャルボタンの位置の工夫などにも応用できるだろう。また固定したサイドバーがブラウザの高さによって途中で切れて機能しないというようなバグも避けることができるはずだ。
2011年までに多くのサイトで使われてきた321pxや769pxなどといった「よく知られたサイズ」をトリガーにしたMedia Queriesはゆっくりと廃れていくだろう。物理的ではなくもっと論理的にWebサイトをデザインするようになっていくということだ。CSSはあまり論理的に書ける文法を持っていないので苦労するだろうが、そこはSassやLESSの力を借りて乗り切っていけば良い。