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

1. CSS3 Media Querieshttp://www.webdesignerwall.com/tutorials/css3-media-queries/

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

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

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

• Max Width（指定した幅より小さい場合に適用）
• Min Width（指定した幅より大きい場合に適用）
• Multiple Media Queries（最大幅と最小幅を指定して，幅がその間の場合に適用）
• Device Width（表示エリアではなくデバイスの幅による指定方法）

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

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

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

2. Mastering Typography in Web Design with Inspirations & Tools | Onextrapixel - Showcasing Web Treats Without A Hitchhttp://www.onextrapixel.com/2010/08/17/mastering-typography-in-web-design-with-inspirations-tools/

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

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

• フォントタイプの選択が訪問者の第一印象に影響を及ぼす
• 多くのフォントを使いすぎるな
• 大きすぎる，または小さすぎるフォントサイズはダメ
• トラッキング，カーニング，行間とマージンはよいタイポグラフィに必要不可欠

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

3. 3 Advanced CSS3 Techniques You Should Learnhttp://sixrevisions.com/css/3-advanced-css3-techniques-you-should-learn/

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

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

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

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

4. Impressive Examples Of Minimalism In Web Design (Part One) | The Inspiration Bloghttp://www.theinspirationblog.net/showcases/impressive-examples-of-minimalism-in-web-design-part-one/

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

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

5. 46 Captivating Examples of Extremely Colorful Web Designshttp://www.1stwebdesigner.com/inspiration/extremely-colorful-web-designs/

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

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

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

• モリサワと大日本スクリーン，フォントビジネスに関するアライアンスを締結 ~ MORISAWA PASSPORTにヒラギノフォントを搭載~ | フォント製品 | 株式会社モリサワ
  MORISAWA PASSPORTに大日本スクリーンのヒラギノフォントが収録されるそうで，驚きました。
• GmailとGoogleドキュメントをまとめて検索! Gmailに「Apps Search」登場 | ネット | マイコミジャーナル
  両方使っている人には便利ですね。
• Google，Chrome用「ウェブ版App Store」をスタート
  手数料についての詳細が発表されたようです。

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

HTMLのインデントを綺麗にするサービス - Ham Cutlethttp://hamcutlet.fjord.jp/

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

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

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

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

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