Greensleeves v2.0 / Tag: CSS3

表示デバイスや表示空間の条件などによって、最適な形にレイアウトを変更または出力する手法のことを "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 な考えもメジャーになってくるかもしれませんね。

Javascript を書く際、CSS のセレクタを使って要素を取得できると色々と楽です。このようなことを実現できるライブラリは、prototype.js の $$() メソッド等があるわけですが、特に cssQuery() は CSS3 の Stractural pseudo-class も大体使えるので結構面白いんじゃないかと思って試しにつかってみました。

実際に使ってみる

XHTML

<ul id="test">
   <li>1st element</li>
   <li>2nd element</li>
   <li>3rd element</li>
   <li>4th element</li>
   <li>5th element</li>
   <li>6th element</li>
</ul>

CSS

ul#test li {
   margin: 0 0 1em;
   padding: 1em;
   border: 1px solid #ccc;
   list-style: none;
}

たとえば上記のような XHTML と CSS があったとして、偶数番目の li 要素だけ文字色を #ffcc00、背景を #777777 に変えたい場合

window.onload = function () {
   var elements = cssQuery('ul#test > li:nth-child(even)')

   for(var i=0; i < elements.length; i++){
      elements[i].style.color = "#ffcc00";
      elements[i].style.backgroundColor = "#777777";
   }	
}

• サンプル: CSS のセレクタを使って要素を取得できる Javascript ライブラリ cssQuery() を使ってみる

このやり方は応用して色々別のところで使えそう（例えばコメント欄の奇数偶数でスタイルを微妙に変えてみたりとかよく見ますね）ですし、CSS3 のセレクタをどうしても使いたい場合に重宝するんじゃないでしょうか。とはいえ Javascript を切られたらそれでお仕舞いなので、簡単なスタイル程度で留めておいたほうがいいとは思いますが。