Greensleeves v2.0 / Archive / 2007-05 / 010234

表示デバイスや表示空間の条件などによって、最適な形にレイアウトを変更または出力する手法のことを "Adaptive Layout" といいます。これを初見したのが A List Apart: Articles: Switchy McLayout: An Adaptive Layout Technique の記事で、目から鱗落ちまくりだったんですが、CSS3 の Media Queries を使えば少し劣る感じはするけど CSS Only で似たようなものが出来そうだったのでちょっと試してみました。まだ、勧告候補（Candidate Recommendation）下じゃん。とか、対応ブラウザ少ないじゃん。とかいう突っ込みは禁止。

たとえば、body 要素の背景色をブラウザの表示空間幅が 640px 以下の場合に赤、641px から 800px まで緑、801px からは青としたい場合、CSS に以下のように記述すれば上手くいきます。

CSS

@media screen and (max-width: 640px) {
   body { background: #f00; }
 }
 @media screen and (max-width: 800px) and (min-width: 641px) {
   body { background: #0f0;}
 }
 @media screen and (min-width: 801px) {
   body {background: #00f;}
 }

• サンプル: CSS3 Media Queries と Adaptive Layout

表示域幅 640px 以下

表示域幅 641px 以上、800以下

表示域幅 801px 以上

Opera 9.2 と WebKit は Media Queries の一部をサポートしているみたいで、ちょっと Opera で試しに見てみたんですが上記の場合、表示域幅が その条件になったときに上記スタイルが自動的に適応されるんじゃなくて CSS が読み込まれたときに条件と合致するスタイルだったら適応される。という感じの挙動でした。

Poll results: 50.4% of respondents maximise windows | 456 Berea Street にもあるようにディスプレイの横解像度が 1024px から 1600px 超までかなりばらけていて、かつブラウザ窓を最大化してる人、してない人。と閲覧状況も複雑になっているので、Media Queries が本格的にサポートされるようになってくると、幅ごとの最適レイアウトも意識されて、Adaptive Layout な考えもメジャーになってくるかもしれませんね。

---