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

1. The Shapes of CSShttp://css-tricks.com/examples/ShapesOfCSS/

CSSだけで図形を描くサンプルコード集です

以下の図形を、画像を使わずに描いたサンプルとコードが紹介されています。

• 四角
• 長方形
• 円
• 楕円
• 三角形（上向き／下向き／左向き／右向き）
• 三角形（左上向き／右上向き／左下向き／右下向き）
• 平行四辺形
• 台形
• 星形
• 五角形
• 六角形
• 八角形
• ハート
• 無限大マーク

三角形は、ボーダーを使って描くという定番テクニックを使っていました。

円やハートマークなど丸みのある部分は、CSS3の角丸を利用しています。複雑な図形には、:before、:after擬似要素を使い、HTML側に余計なマークアップを使わないようにしています。

2. Guide to Website Navigation Design Patternshttp://sixrevisions.com/user-interface/navigation-design-patterns/

Webサイトのナビゲーションを、デザインパターンとして分類して紹介した記事です。

• トップの水平方向ナビゲーションバー
• 垂直方向ナビゲーションバー／サイドバー
• タブナビゲーション
• パンくずナビゲーション
• タグナビゲーション
• 検索ナビゲーション
• フライアウトメニューとドロップダウンメニューナビゲーション
• ファセット／ガイドナビゲーション
• フッターナビゲーション

といった種類に分けて解説しています。

ファセット／ガイドナビゲーションとは、さまざまな条件で絞り込んでいくナビゲーションのことです。ECサイトでよくある、値段、サイズ、色、ブランドなどの要素で絞り込んで、商品を探していくような仕組みを指すようですね。

3. Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles - Smashing Magazinehttp://www.smashingmagazine.com/2011/02/07/mastering-photoshop-noise-textures-gradients-and-rounded-rectangles/

ノイズ、テクスチャー、グラデーション、角丸矩形に関する、Photoshopのテクニック紹介です。

角丸矩形の作り方として、以下の4種類の方法が解説されていました。

1. 角丸長方形ツールを使う
2. ぼかしを使う
3. 円を使う
4. 境界線（ストローク）を使う

通常は、「⁠ピクセルにスナップ」にチェックを入れた角丸長方形ツールを使えばいいようですが、ほかの方法も知っておくと役に立ちそうです。

4. 10 Best HTML5 Video Player | denbagus bloghttp://www.denbagus.net/html5-video-player

Webサイトにビデオを埋め込むための、HTML5を使ったプレイヤーを紹介しています。

Flashを使わずにビデオを再生させる方法として、注目されている分野です。

モダンブラウザだけでなく、古いバージョンのIE、iOS、Androidまでもサポートしているものが目立ちます。

5. 20 jquery and css3 Tutorials | UnderWorld Magazineshttp://www.underworldmagazines.com/20-jquery-and-css3-tutorials/

jQueryとCSS3を使ったテクニックを解説した記事のリンク集です。

jQueryとCSS3を組み合わせることにより、従来より簡単に効果的な動きや表現を実現できます。

そのほか、先週の記事の中から、jQuery関連の記事を3つ紹介します。

• jQuery Mobile [基礎編]
  jQuery Mobileを解説したスライドです。
• Ultimate List of jQuery Plugins You Should Use on Every Website | Web Designer Aid
  便利なjQueryプラグインのリンク集です。
• 25 Free jQuery Photo Gallery / Albums with Tutorials | VisonwidGet
  jQueryを使ったフォトギャラリーを多数紹介しています。

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

Useful Web Services, Tools and Resources For Web Designers - Smashing Magazinehttp://www.smashingmagazine.com/2011/02/08/useful-web-services-tools-and-resources-for-web-designers/

今回は、Webデザイナーに役立つWebサービスやツールなどを大量に紹介した記事を取り上げます。

フォント選択、ファイル共有、プレゼンテーション、メールアドレス短縮、複数ブラウザでのテスト、グリッド作成、CSSスプライト作成などに役立つサービスが紹介されています。