2010年8月第4週号　1位は、CSS3のメディアクエリの使い方、気になるネタは、コクヨ、iPad 1500台導入

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2010年8月16日～8月22日の間に見つけた記事のベスト5です。

CSS3のメディアクエリの使い方を紹介した記事です。

CSS2ではメディアタイプによって、スクリーン用とプリント用などでCSSを分けることができました。CSS3ではメディアクエリを使い、ディスプレイの解像度の違いなどによって、より効果的なCSSの切り分けができるようになっています。

メディアクエリによる実際の指定方法として、以下の例が解説されていました。

iPhone 4用、iPad用として指定するコードも紹介されています。

メディアクエリに対応していないIE8以前のために、JavaScriptを使って同様のことを実現する方法へのリンクも載っていました。

実際にメディアクエリを使ってCSSを切り替えているサイトの実例も必見です。

Webデザインにおけるタイポグラフィに関するまとめ記事です。

タイポグラフィに関して気をつける点として、以下のことが解説されています。

タイポグラフィが優れたサイトのギャラリーや、タイポグラフィ関連のオンラインツール、関連記事へのリンクが充実しています。

必ずマスターしたいCSS3の3つのテクニックを紹介した記事です。

進化したセレクタ（新たな疑似クラス⁠）⁠、アニメーション、メディアクエリの3つについて、実例を挙げて解説しています。

「:nth-child(n)」という疑似クラスで、親要素のn番目の子要素を指定できます。また、数値の部分は「odd（奇数⁠）⁠／even（偶数⁠）⁠」を使うことも可能です。これで、リストの一行おきに背景色を付けることも簡単に実現できます。「⁠:not」という「○○ではない要素」の指定も便利ですね。

メディアクエリについては、1位の記事でも詳しく学べます。メディアクエリを使ってiPhoneやiPad向けのCSSを用意できることが、いまアメリカでは注目されているのでしょうね。

ミニマルなWebデザインのギャラリーです。ミニマリズムはWebデザインの主流のトレンドで、ミニマルでクリーンなデザインを好むユーザーは多いと書いてありました。

パート1とパート2の2ページに分けて紹介されています。

カラフルなWebデザインのギャラリーです。「⁠生活にとっての色は料理にとっての塩のようなもの（Color to life is like salt to food⁠）⁠」という色の重要性をあらわすフレーズがいいですね。

ミニマルとカラフルとは相反するものではないですが、ミニマルデザインのギャラリーと対比して見るのも興味深いです。

そのほか先週の記事から、気になるニュース記事を紹介します。

先週の気になるWebサービス

Ham CutletはHTMLのインデントを綺麗に揃えるWebサービスです。ソースを見やすくわかりやすくすることができます。

インデントを揃えるだけでなく、余計な空行が削除されたり、改行が追加されるケースもあるようです。意図せずに改行が追加されてしまうので、その点は注意が必要だと思います。ソースを配布しているので、その辺は自分でカスタマイズすることも可能なようです。

CMSが生成した、無駄な空白やインデントだらけのコード、他人の作ったグチャグチャなコードなどをいじる必要があるという人も少なくないと思います。そういうときは、このサービスで一旦綺麗にしてから作業すると便利だと思います。

なお、Dreamweaverの「ソースフォーマットの適用」機能でも、同様のことができるようです。

Ham Cutletは「ハムカツレツ」でハムのマークが付いています。ボタンも鍋の絵柄に「cook」となっていたりとシャレていますね。

コクヨが来年度から年間約1500台のiPadの導入を予定しているそうで、各所でニュース記事になっていました。次世代オフィス環境を実現するサービス開発に向け、まずは社内での活用を始めるとのことです。

プレゼンや会議のときには、確かにiPadは活躍しそうです。パソコンをiPadに置き換えることができれば、経費節減にもつながるでしょうね。「⁠母艦」としてのパソコンは必要なんですが。

Wi-Fiモデルと3Gモデルのどちらを導入するのかということが、ちょっと気になります。Wi-Fiモデルだろうなとは思うのですが、商談などで外で使うには3Gモデルの方が便利ですよね。

こうやってニュースに取り上げられることによって、iPadをビジネスに活用している企業というイメージが付くのもメリットになるでしょう。実際の導入が進んだところで、実用例などを色々聞いてみたいですね。