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

1. 15 Essential Checks Before Launching Your Website | How-To | Smashing Magazinehttp://www.smashingmagazine.com/2009/04/07/15-essential-checks-before-launching-your-website/

Webサイトを公開する前にチェックする項目と，チェックに役立つツールの紹介記事です。

15のチェック項目の内容に関しては，「⁠サイトを公開するまえにチェックすべき15の項目 | エンタープライズ | マイコミジャーナル」に翻訳してまとめてあるのがとても参考になります。

元記事の方には，実際のコードの記述例や，便利なツールへのリンクが用意されています。

また，末尾で紹介されている「The Ultimate Website Launch Checklist」（⁠2009年2月第3週号で紹介しました）と「Quick Usability Check List」（⁠ユーザビリティのチェックリスト）も参考になるでしょう。

2. Perfect multi-column CSS liquid layouts - iPhone compatiblehttp://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

完璧なマルチカラムのCSSリキッドレイアウトだそうで，パーフェクトと謳っているのが気になります。CSSハックもJavaScriptも画像も使わずに，「⁠Full length column background colours」を実現しているのがポイントですね。

原文からそのまま「Full length column background colours」ということばを引用しましたが，カラム（段組の段）の背景色が，段組み全体の高さいっぱいまで適用されるという意味です。

段組レイアウトのとき，フロートされたカラムに背景色を付けてもテキストや画像などがあるところまでしか背景色がつきません。そのため，段組全体を囲む要素に背景画像を指定する方法が一般的です。また，Javascriptを使うという対策もあります。さらに，フロートをクリアする際のCSSハックも定番テクニックとなっています。

ところがここで公開されている方法では，それらテクニックを全く使っていないということなのです。

ソースを見てみたところ，段組全体を囲む背景色用の領域を用意して，背景色を付けたいカラムと同じ幅で背景色を指定しているようです。種を明かせばなーんだというような方法ですが，シンプルで良くできた解決法ですね。

3. 1枚の画像を切り出すテクニックCSS Sprite，便利ツール登場 | エンタープライズ | マイコミジャーナルhttp://journal.mycom.co.jp/news/2009/04/10/005/index.html

CSSスプライトのためのツールとして最近登場したSprite Creator 1.0と，昔からあるCSS Sprite Generatorとを紹介した記事です。

CSS Sprite Generatorは，アップロードされた複数画像を1枚にまとめた画像を生成し，それぞれの画像を表示するためのCSSを作ってくれるというサービスです。

一方，新登場のSprite Creatorは，1枚の画像から特定部分を選択ツールで選ぶと，その部分を表示するためのCSSが生成されるというものです。場合によって使い分ければよさそうですね。

前回の「今週の気になるWebネタ」で，Googleマップの人型アイコンにCSSスプライトが使われていることに触れたので，ちょうどタイムリーだと思い紹介しました。

4. 50 Stylish Navigation Menus for Design Inspirationhttp://sixrevisions.com/design-showcase-inspiration/50-stylish-navigation-menus-for-design-inspiration/

スタイリッシュなナビゲーションメニューのデザインショーケースです。

前回，ドロップダウンメニューや，メガメニューと呼ばれる大きな領域のサブメニューが開くドロップダウンが流行っているようだと書きましたが，やはりその傾向がうかがえますね。

ここで紹介されているホワイトハウスのサイトなんて，かなりのメガメニューっぷりですよ。

5. 35 Awesome User Interface Design Tutorials | Pro Blog Designhttp://www.problogdesign.com/resources/35-awesome-user-interface-design-tutorials/

ユーザーインターフェイスデザインのチュートリアルが多数紹介されています。

理論やテクニカルな話ではなく，純粋にビジュアルデザインに関するチュートリアルですね。

ほとんどのチュートリアルでは，パーツではなくサイト全体をデザインする内容になっています。

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

そのほか先週の記事から，これを読めば話題のTwitterに関しての理解が深まるという記事を3つ紹介します。

• ICHINOHE Blog: Twitter上の話題をトラッキングする15の方法：Mashableの記事より
  Twitterの話題を検索したり追跡したりするのに便利なツールの紹介です。元ネタは英文記事で，紹介されているツールも日本向けではないのですが，Twitterを知る上で参考になるはずです。
• メインストリームに躍り出たマイクロブログ「Twitter」の果たす役割とは？：日経ビジネスオンライン
  Twitterの何がすごいのかを説明するのは難しいのですが，Twitterの現状についてうまくまとめてある記事ですね。
• POLAR BEAR BLOG: 日本の Twitter にもハッシュタグが定着すれば，と思った話
  Twitterと検索についてのちょっと興味深い話です。

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

File2.wshttp://file2.ws/

どんなファイルでもWebサイトとして公開できるというサービスです。サイト名は「File to Web Site」という意味ですね。

ユーザー登録などが不要というお手軽さと，豊富なフォーマットに対応したプレビュー機能がウリのようです。画像だけでなく，動画や音声ファイル，PDFやワード書類などもプレビュー表示できます。

複数ファイルを同時にアップロードすることはできませんが，Zipなどでまとめて圧縮してからアップすると，サーバー側で個々のファイルのプレビューを生成してくれます（結構時間がかかるようですが）⁠。ちょっとした画像ギャラリーならこれで作れちゃいますね。

お手軽な分，アップしたファイルを消す方法や，パスワードなどでアクセス制限する機能はありません。

アップしたファイル名を元に「http://file2.ws/○○」といったURLが割り当てられるのですが，このURLあるかなと思ってありがちなフレーズを入れてみる遊びもありかも。

なお，wsというドメインは，オセアニアのサモア独立国（旧西サモア）のものだそうです。