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

1. “Add to Cart” Button Showcase | Vandelay Design Bloghttp://vandelaydesign.com/blog/galleries/add-to-cart/

ECサイトの「カートに入れる」ボタンのショーケースです。カートに追加するということで「+」の記号を使うケースが多いようです。

「Cart」ではなく「Bag」という表記のものも結構あります。でも，紙袋（ショッピングバッグ）のアイコンよりも，あのゴロゴロ押すショッピングカートのアイコンの方がなじみがありますよね。

ショッピングカートページを集めた「35 Inspirational Shopping Cart Page Designs | Noupe」という記事もありました。こちらはカートの中身を閲覧するページのショーケースです。

これらのショーケースは，ECサイトのデザインにとても参考になりそうです。

2. The Essence Of About Us Page With 12 Captivating Showcases | Onextrapixel - Showcasing Web Treats Without Hitchhttp://www.onextrapixel.com/2009/07/31/the-essence-of-about-us-page-with-12-captivating-showcases/

「About Us」ページの内容に関する考察とショーケースです。

「About Us」ページは，サイトに訪れた人の

• あなた（たち）は誰？
• 何をしているの？
• 信用できるの？

といった疑問に答えるページと考えるとよさそうです。

記載されることが多い内容としては，

1. 組織のプロフィール
2. 連絡の取り方
3. 免責条項と規約・使用条件など法的な情報
4. 顧客と提携先
5. 人材募集
6. プレスリリースなど広報
7. 年次報告書など投資家向け情報（IR）
8. 地域社会への貢献などCR活動について
9. サイトの制作チームなどのクレジット
10. よくある質問と答え（FAQ）

といったものがあり，それぞれの実例となる「About Us」ページも紹介されています。

3. [CSS]ネガティブマージンの理解を深め，活用するテクニック集 | コリスhttp://coliss.com/articles/build-websites/operation/css/css-using-negative-margins.html

ネガティブマージンに関する解説記事です。Smashing Magazineの「The Definitive Guide to Using Negative Margins」を翻訳しています。

ネガティブマージンとはマイナスの数値を指定したマージンのことです。マージンにマイナスの値を指定するのは裏技ではなく正しいCSSの記述で，IE6以降のモダンブラウザでサポートされているそうです。

しかし，Dreamweaverのデザインビューは対応していないようで，それが原因で使うのがためらわれるという人も多そうですね。

2カラムのリキットレイアウトの片方を固定幅としたい場合，ネガティブマージンを使うことで実現できます。100%の横幅のうち200pixel分をサイドバーとする場合，メインの100％の領域にマイナス200pixelのマージンを作り，そこにサイドバーをフロートさせるといいそうです。

4. 25+ Create Amazing Image Effects with Some of the Best jQuery Plugins Available | tripwire magazinehttp://www.tripwiremagazine.com/tools/tools/25-create-amazing-image-effects-with-some-of-the-best-jquery-plugins-available.html

フォトギャラリーやスライドショーなど，画像の見せ方に関するjQueryプラグインが多数紹介されています。

5. The Ultimate Round-Up of Fireworks Tutorials and Resources | Tutorials | Smashing Magazinehttp://www.smashingmagazine.com/2009/07/27/tutorials-and-resources-for-adobe-fireworks/

Fireworksのチュートリアルやテクニックなどの情報源を集めた膨大なリンク集です。ビデオチュートリアルも豊富に紹介されていて，全部見るには相当時間がかかりそうですね。

Photoshopに比べるとFireworksはTipsやテクニックの情報が少ないので，Fireworksユーザーにはうれしい記事だと思います。「⁠Fireworksってサイトのラフを作るツールでしょ」と誤解している人もぜひこれを見て，デザインの最終段階まで使えるツールだと知ってほしいですね。

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

そのほか先週の記事から，フリーの素材集とFirefoxアドオン集を紹介します。

• 40 Free and Useful GUI Icon Sets for Web Designers | Icons
  Webページのインターフェイスに使えそうなフリーのアイコン集です。
• Top 5 Free Websites for Quality Stock Photographs
  フリーの写真配布サイトの紹介です。
• 27 Firefox Addons For Power Blogging - slodive
  ブロガーのためのFirefoxアドオン集です。

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

CSS Prism by Ryan Berghttp://cssprism.com/

サイトかCSSのURLを入力すると， 使われている色を値とともに表示します。単に色を表示するだけのサービスかと思ったのですが，色を変更して，変更内容が適用されたCSSをダウンロードする機能もありました。その色がCSS中のどこに使われているのか確認もできます。

場当たり的に使ってしまった色を，あとで全体のバランスをみて調整するというケースに使えそうです。もちろんリニューアルでサイトの色合いをがらっと変える場合にも便利でしょう。

シンプルで操作感がいいツールです。ブックマークレットで手軽に使えるところもいいですね。

※ なお，CSSをダウンロードする機能をわたしのMac環境で試してみたところ，Safariでは大丈夫なのですがFirefoxではうまくいきませんでした。