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

1. Carsonified ? 5 Advanced Photoshop Techniques for Web Designershttp://carsonified.com/blog/design/5-advanced-photoshop-techniques-for-web-designers/

WebデザイナーのためのPhotoshopチュートリアル記事です。

以下のような、最近のWebデザインのトレンドを押さえたテクニック集となっています。

1. シンプルで効果的なボタン
2. 透明度があってフェードアウトしていくナビゲーションメニュー
3. 型押しされたような文字
4. ぼかした光と影でボックスを浮かび上がらせる
5. 奥行きを持った3D的空間の演出

Photoshopでボタンやバッジを作るチュートリアルのリンク集「30 Useful Photoshop Buttons and Badges Tutorials : Speckyboy Design Magazine」という記事も併せてご参考に。

2. CSS Sprites with Inline Images | CSS-Trickshttp://css-tricks.com/css-sprites-with-inline-images/

imgタグで配置した画像に対して、CSSスプライトを使おうというテクニックの紹介です。

小さなアイコンや記号など、サイト内で何度も出てくる画像を一枚にまとめておくことでロード時間を短縮させようというのがCSSスプライトです。CSSスプライト用の画像は背景画像として配置する方法が一般的ですが、CSSの絶対配置と「clip:rect」を使ってインライン画像に使うこともできるんですね。目から鱗のテクニックです。IE6でもちゃんと使えるそうですよ。

「clip:rect(0 48px 48px 0);」といった指定のとき、この数値はマージンなどの指定と同様に、時計回りに上、右、下、左の順番だそうです。この場合ちょっと分かりにくいのですが、上端のY軸の値、右端のX軸の値、下端のY軸の値、左端のX軸の値ということになります。

「MOONGIFT: ? 便利！CSS Spriteを作成するAIRアプリ「Tonttu」:オープンソースを毎日紹介」では、CSSスプライト用に複数画像を一枚にまとめてくれるAIRアプリが紹介されています。プロジェクトファイルを保存しておけるので、後から画像を追加／削除できるのが便利なようです。

3. A Showcase of Fantastic Footer Designs | Web Design Ledgerhttp://webdesignledger.com/inspiration/a-showcase-of-fantastic-footer-designs

フッタデザインのショーケースです。

昔は単にコピーライトを入れておくだけの使われ方が多かったフッタ部分ですが、今はユーザーに長く滞在してもらうためのナビゲーションを入れる重要な場所としてデザインされているとのことです。

4. Taming Advanced CSS Selectors | CSS | Smashing Magazinehttp://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/

CSSセレクタに関するまとめ記事です。ブラウザによる対応状況についてもちゃんと触れられています。

探せば日本語でのCSSセレクタの記事もたくさんあると思いますが、虎の巻的ページはたくさんブックマークしておいても損はないと思い紹介しました。

原典に当たりたいという方は、W3Cのセレクタについての項「Selectors Level 3」もチェックしましょう。

5. What’s in your Cart? 30+ High-Quality Shopping Cart Templates | Noupehttp://www.noupe.com/design/shopping-cart-templates.html

ショッピングカートシステムの高品質のテンプレートを、ベースとなるシステム別に紹介しています。

ECサイト構築のシステムとして取り上げられているのは、以下の5つでした。

• Wordpress
• osCommerce
• Magento
• Zen Cart
• CRE Loaded

以上、メルマガ「デイリーWebテク」で先週紹介した記事から独断と偏見で選んだベスト5でした。

そのほか先週の記事から、便利なスクリプトのまとめ記事とチュートリアルを紹介します。

• 14 Easy to Implement Drop Down Menu Solutions | Web Design Ledger
  ドロップダウンメニューのソリューションを複数紹介しています。
• 22 Beautiful jQuery Plugins for Web Designers | Tutorial9
  想像力を刺激するようなjQueryプラグインがまとめられています。
• AnythingSlider jQuery Plugin | CSS-Tricks
  コンテンツをスライド表示するjQueryプラグインです。

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

Twilog - Twitterのつぶやきをブログ形式で保存http://twilog.org/

Twilog（ついろぐ）は、Twitterのつぶやきをブログ形式で保存、閲覧できるWebサービスです。

TwitPicなどのURLを含むつぶやきでは画像が表示されたり、過去のつぶやきを検索できたりと、なかなか機能も充実しています。

OAuth認証を使ってTwitterユーザーが気軽に使えるようになっていますし、なにより日本語のサービスなので、Twitter初心者にも使いやすいサービスでしょう。

自分のつぶやきをまとめて公開するという目的では、Friendfeedを使うという方法もありますね。