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

1. Think Vitamin » Getting Started With (and Gotchas of) CSS Media Querieshttp://thinkvitamin.com/design/getting-started-and-gotchas-of-css-media-queries/

CSS3のメディアクエリを使った実例を作るチュートリアル記事です。

iPadのメールアプリは，左側にメールの一覧，右側で本文を読める2ペイン表示になっています。この左側の一覧は，横画面の時には常に表示されているのですが，縦画面にするとボタンで表示／非表示を切り替えられるようになります。

メールアプリ以外でもこのデザインパターンを採用したアプリは多いのですが，これと同様のことをCSSとJavaScript（jQuery）で実現する方法をこの記事で学ぶことができます。

CSSで「max-width: 800px」のときにはナビゲーション部分の位置を変更して非表示に設定し，jQueryを使ってボタンを押すごとにナビゲーション部分の表示／非表示を切り替えるという仕組みでした。意外に簡単に実現できるんですね。

デモはパソコンでも確認することができます。ウィンドウの横幅を小さくするとメニュー部分が非表示になり，メニューボタンが出現します。

2. Free Wireframing Kits, UI Design Kits, PDFs and Resources - Smashing Magazinehttp://www.smashingmagazine.com/2010/08/27/free-wireframing-kits-ui-design-kits-pdfs-and-resources/

ワイヤーフレームの作成に役立つ素材，UI（ユーザーインターフェイス）デザイン用の素材，ワイヤーフレームの関連情報などを大量に紹介したリンク集です。

iPhone，iPad，AndroidのためのUI素材やフレームワーク用素材が目立ちます。

• モバイルデバイス用UIのPSD素材
• ソーシャルネットワークサービス用UIのPSD素材集
• ワイヤーフレーム用素材集
• ワイヤーフレームに関する役立つ記事
• ワイヤーフレーム関連情報，ショーケース，まとめ記事

が紹介されています。

3. 35 Best Free Chrome Extensions for Web Developers | Web Resources | WebAppershttp://www.webappers.com/2010/08/25/35-best-free-chrome-extensions-for-web-developers/

WebデベロッパーのためのGoogle Chrome用エクステンションを紹介した記事です。

FirefoxでおなじみのFirebugもWeb DeveloperもChrome版が存在しています（FirebugはLite版ですが）。Safariと同様に標準で開発者用ツールも用意されていますし，Web制作者用のブラウザとして確かに魅力的ですね。

4. 40 Elegant Free CSS/(X)HTML Templates from 2010 - Noupe Design Bloghttp://www.noupe.com/how-tos/40-elegent-free-css-x-html-templates-from-2010.html

フリーのCSS／(X)HTMLテンプレートを40個紹介しています。

いくつかのテンプレート配布サイトから，優れたデザインのものをピックアップしているようです。

5. A Showcase of Single Page Websites | Webdesigner Depothttp://www.webdesignerdepot.com/2010/08/a-showcase-of-single-page-websites/

1ページ完結型Webサイトのショーケースです。使いやすく，センスがあり，1ページ完結型の利点を活かしたサイトを揃えています。

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

• Googleチャットから電話がかけられるようになったので試してみたよ！ - IDEA*IDEA ～ 百式管理人のライフハックブログ
  Skype Outより安く電話をかけられるようです。
• Google Japan Blog: リアルタイム検索に新しい機能が加わりました
  Googleリアルタイム検索に3つの機能が追加されました。
• Google Analytics，77の注意点（追記有） | カグア！Google Analytics 活用塾:事例や使い方
  Google Analytics を理解する上で，覚えておいた方が良い計測仕様や算出方法をまとめたものです。

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

45 Free Applications For Designers And Developers - Noupe Design Bloghttp://www.noupe.com/tools/45-free-applications-for-designers-and-developers.html

今週はWebサービスだけではなく，Webデザイナー／デベロッパーに役立つWebサービスやアプリケーションを多数紹介した記事を取り上げたいと思います。

「45 Free Applications For Designers And Developers」では，エディタ／FTP／画像編集／ベクター画像編集／カラーパレット／3D／タイポグラフィ／その他のカテゴリに分けて，45個のアプリケーションを紹介しています。

Mac／Windows／LinuxのアプリケーションとWebサービスに加え，iPhone/iPadアプリとAndroidアプリも一緒に紹介されています。iPhone/iPadやAndroidも，Web制作の作業に使えるようになってきたということでしょう。