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

1. Design and Code a Slick Website from Scratch -- Part I - Nettuts+http://net.tutsplus.com/tutorials/design-tutorials/design-and-code-a-slick-website-from-scratch-%E2%80%93-part-i/

デザインからコーディングまでのWebページ制作を、ゼロから全部教えてくれるというチュートリアルのシリーズです。パート1はPhotoshopによるデザインまでで、続くパート2で、XHTML／CSSのコーディングが紹介されています。パート2に出てくる、Photoshopの画像をWeb用にパーツ化していく作業も参考になるでしょう。

パート1、パート2とも紹介されている素材やコードは、まとめてダウンロードできるようになっています。

このエントリーの作者はコーディングにはDreamweaverを使っているそうですが、デザインビューは使わずコードビューを使っているようです。また、普段はOperaを愛用しているけれど、開発に使うブラウザはFirefoxとのこと。Firebugが使えるからというのが大きいようです。

先週は、Photoshopでのデザインをコーディングしていくチュートリアルがいろいろ公開されていました。

「How to Convert a Photoshop Mockup to XHTML/CSS」は、「⁠Create a Clean Modern Website Design in Photoshop」で作ったデザインからパーツを準備し、XHTML／CSSコーディングしていくチュートリアルです。コードがテキストとしてではなく画像でしか紹介されてないのが残念ですね。

同様に「Coding a Clean Web 2.0 Style Web Design from Photoshop」は「How to Create a Clean Web 2.0 Style Web Design in Photoshop」で作ったイメージをコーディングしていく内容です。こちらは素材やコードをダウンロードできます。

ところで、これら全てのチュートリアルにおいて、jQueryを使ったJavaScriptのコーディングにも触れられています。ライブラリを使ったJavaScriptコーディングは、Webデザイナーには必須のスキルという時代なのかもしれません。

2. 30 Examples of Attractive Navhttp://www.webdesignerwall.com/trends/30-examples-of-attractive-nav/

魅力的なナビゲーションのサイトを多数紹介しています。最近のトレンドともいえる、Flash風の動きをJavaScriptで実現したものが多いですね。

それぞれのサイトのナビゲーションについて、ちょっとした解説が載っています。それを読んでからサイトを訪れると、どこが優れたポイントなのかの理解が深まると思います。

なお、ナビゲーションの実装については、先週公開された記事に「36 Eye-Catching Jquery Navigation Menus | 1stwebdesigner - Love In Design」というのがありました。jQuery限定ですが、様々なナビゲーションメニューのライブラリやチュートリアルへのリンク集です。

3. The 960 Grid System Toolbox & Resources | Webdesigner Depothttp://www.webdesignerdepot.com/2009/05/the-960-grid-system-toolbox-and-resources/

CSSのフレームワーク「960 Grid System」に関連するチュートリアルや作例集です。また、その他のCSSフレームワークについてもまとめてあります。

4. 22 CSS Button Styling Tutorials and Techniques : Speckyboy Design Magazinehttp://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/

CSSでボタンをデザインするためのチュートリアルやテクニックがまとめられています。

ラベルはテキストで、背景に画像を配置するというのが基本のパターンですね。あとは文字数やサイズの可変にどう対応するかと、ロールオーバーのときの見せ方がポイントでしょう。

なお、CSS3を使えば角丸でドロップシャドウがついたボタンは簡単に作れますが、IEは非対応なんですよね。

5. 10 Intelligent Ways of using [FORM] Elements | Noupehttp://www.noupe.com/css/10-intelligent-ways-of-using-form-elements.html

フォーム要素を使った優れたソリューションの紹介です。投票システム、アップローダー、CAPTHAなどが紹介されています。

タグを入力するときのインターフェイスで最近よく目にする便利な機能を実現する「4. TextboxList」は使ってみたいと思いました。

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

そのほか先週の記事から、jQueryを使った役に立ちそうなテクニックを紹介します。

• How to implement a news ticker with jQuery and ten lines of code
  自動でアニメーションして切り替わっていくニュースティッカーを作るチュートリアル記事です。
• Smart Columns w/ CSS & jQuery
  ブラウザの横幅を変えてもちょうどいい感じにブロックがリサイズ＆整列されるレイアウトを実現できます。
• [JS]超軽量で、シンプルなツールチップを実装するスクリプト -vTip | コリス
  簡単軽量なツールチップのスクリプトの紹介です。

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

めいしったー : あなたのTwitter画面を名刺にhttp://yumeka.to/meishitter/

「めいしったー」は、TwitterのユーザーIDを入れると、プロフィール情報と最近のつぶやきの入った名刺画像を作成してくれるサービスです。もちろんユーザーアイコンと背景画像もそのユーザーのものが反映されます。

IDを入れるだけなので、人の名刺を勝手に作るという楽しみ方もあります。オバマ大統領（BarackObama）とか中川翔子（strawberry2）など有名人の名刺を作ってみるのも面白いかも。

標準ではブログなどに貼る用に幅500ピクセルの画像が生成されますが、印刷用に幅1280ピクセルの画像も作ることができます。

なお、類似サービスとして、「⁠ついったー名刺ジェネレータ」というサイトもありました。