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

1. CSSハックしてはいけない5つの理由 | エンタープライズ | マイコミジャーナルhttp://journal.mycom.co.jp/news/2009/03/05/040/index.html

Sitepointの「5 Reasons to Avoid CSS Hacks and Conditional Stylesheets」という記事では、CSSハックは短期的には効果があるが、長期的には問題が起きる可能性があるので使わない方がいいということが5つの理由で解説されています。

その記事を元に、さらに別のヒントも加えてまとめたのが、このマイコミジャーナルの記事です。

わたしはあまりClearfix（定番のCSSハックのひとつ）を使わないので、IE7が出てClearfixが効かないと騒ぎになったときにも対策に追われずに済みました。その時のように、CSSハックを使っていることによる問題が起きる可能性は確かに低くはないでしょう。

でも、ネットでの有志によりIE7対応版のClearfixもすぐに広まったので、定番のCSSハックを使っている限り、何か問題が起きてもいずれなんとかなるという気もしますね。

「CSSハックしてはいけない5つの理由」を肝に銘じつつ、CSSハック部分を別ファイルにしておくなど、メンテナンス性を考えて必要最小限の箇所に使うというのが現実的なのではないでしょうか。

なお、SitePointではこの記事に関連して、IE6の問題をvalidな（文法的に正しい）HTML/CSSで解決する方法を解説した「10 Fixes That Solve IE6 Problems」も発表しています。マイコミジャーナルでも、それを受けての記事「IE6問題に対処する10のテクニック」がアップされていました。

2. Safari 4が対応したCSSの新機能：グラディエント、反転、マスク - builder by ZDNet Japanhttp://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20389157,00.htm

WebKitが採用したCSSの新機能「グラディエント⁠」⁠、「⁠反転⁠」⁠、「⁠マスク」をSafari4（ベータ版）でサポートしているそうで、それらの機能の解説記事です。

また、同コーナーで過去に紹介されているCSSによるトランスフォーム（回転、拡大・縮小、スキュー、移動）も要チェックですね。

CSS3による角丸、ドロップシャドウなどとあわせ、IE以外だと「よりリッチ」というページが今後増えていくのかもしれません。

なお、この辺のWebKitの独自拡張に関しては、「⁠シリーズ妄想 (1) - アップルはWebKitをFlash対抗プラットフォームに進化させようとしているのか | 謎解きウェブ | BLOG × WORLD ENDING」による考察も興味深いです。

3. 費用をかけずにウェブページを最適化　Googleウェブサイトオプティマイザー活用術：MarkeZine（マーケジン）http://markezine.jp/article/detail/6673

LPO（ランディングページ最適化）という言葉を聞くようになって久しいですが、このLPOでの仮説・検証を行うのに役立つGoogleウェブサイトオプティマイザーの使い方の紹介記事です。もちろんランディングページ以外のページでも利用できます。

Googleウェブサイトオプティマイザーでは、画像違い、キャッチコピー違いなど複数パターンのページを生成し、どのページがコンバージョン率が高いかを検証することができます。この手のツールは有料のものが多いのですが、Google版は無料なのでお手軽に試すことができますね。

Googleウェブサイトオプティマイザー自体は昔からあるサービスですが、使ったことはないという人が多かったのか、この記事はソーシャルブックマークのブックマーク数も多いようです。

4. 10 Blog Designs with Innovative Layouts | Web Design Ledgerhttp://webdesignledger.com/inspiration/10-blog-designs-with-innovative-layouts

斬新なレイアウトのブログデザイン10選です。新聞風のレイアウトが多いですね。

一番目に紹介されているSpaceCollectiveというサイトのエントリー一覧から個別エントリーの表示の仕方はスゴイです。一昔前ならこういった表現はFlashなしでは考えられなかったでしょうね。

SpaceCollectiveもそうですし、他のサイトでもテキスト、画像を含めたひとまとまりのブロック全体をクリッカブルにしているケース（いわゆるリンクボックス）が多いようです。ちなみに、わたしは最近リンクボックスを作るのにFittedというjQueryのプラグインを利用しています。

5. How To Use Icons To Support Content In Web Design | Design Showcase | Smashing Magazinehttp://www.smashingmagazine.com/2009/03/03/how-to-use-icons-to-support-content-in-web-design/

Webデザインでのアイコンの使い方についてのレクチャー記事です。 アイコンをうまく使っているページのショーケースも豊富で、アイコンデザインやレイアウトの参考にもなりそうです。

「アイコンの効果的な使い方を実例から学ぶチュートリアル | コリス」に意訳されていました。

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

そのほか、先週の記事の中から気になる情報をピックアップして紹介します。

• 主要ブラウザすべてに影響する「クリックジャッキング」攻撃とは
  透過指定されたiframeなどを使ってブラウザ上のクリック操作を乗っ取るという「クリックジャッキング」の解説です。
• Gmailで定型文を使う方法 - IDEA*IDEA ～ 百式管理人のライフハックブログ ～
  GmailのLabs機能で定型文の挿入をする機能があるようです。
• 「え？ このやり方って違法なの？⁠」⁠　いまさら聞けない改正特定電子メール法の疑問に答えます：MarkeZine（マーケジン）
  メルマガや広告メールなど、企業からユーザーへのメールを適正かつ確実に届けるために、気をつけておくべきポイントが紹介されています。
• 私はGoogleリーダーを使ってこんな風に情報を集めています*二十歳街道まっしぐら
  Googleリーダーの個人的な活用術がまとめてあります。

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

25 Websites To Have Fun With Your Photos | Web 2.0http://www.hongkiat.com/blog/25-websites-to-have-fun-with-your-photos/

今回は、写真を合成したり加工したりして楽しめるWebサービスをいろいろ紹介しているサイトを取り上げます。

写真画像データを使って楽しんじゃおうという面白系のものがほとんどです。子供の写真や彼女・彼氏の写真を使うと盛り上がりそうですね。

これらのサービスを見ていて思ったのですが、写真を自動的に面白写真にして表示してくれるデジタルフォトフレームがあったら楽しいかもしれません。