2009年10月第1週号　1位は、検索結果ページのデザイン／気になるネタは、キー局がなぜ今、YouTubeに

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

検索結果ページのデザインと機能について、多くの事例をもとに最良なパターンを探った記事です。

以下の項目に分けて、それぞれの検索画面についてポイントを解説しています。

最後に、検索結果のデザインに関するアドバイスがまとめられています。見た目のデザインよりも、機能面での話が多いですね。

米Yahooが提供するYUI CSS Frameworkのチュートリアル記事です。

YUIはYahoo! User Interface Libraryの略で、ユーザーインターフェイスを実装する手助けとなるライブラリです。YUIを使うと、ドロップダウンやスライダーなどを簡単に作ることができます。

その中の、CSSに関するフレームワークがYUI CSS Frameworkというわけです。この記事では、YUI CSS Frameworkを使って、段組みレイアウトを作る方法を紹介しています。

YUI CSS FrameworkのCSS Gridを使うと、ページ全体の段組みを簡単に作ることができ、その変更も楽になります。たとえば、divに付けたclassの値を変えるだけで、2カラムレイアウトの左右のカラムの入れ替えや幅の変更ができるんです。

記事の中で作成したHTMLとCSSのセットはダウンロードできるので、そのHTMLをいじってみると理解が早いでしょう。

この記事はYUI2をベースに書かれていますが、現在YUI3という新しいバージョンも公開されています。

ブログとTwitterの両方で情報発信している雑誌のサイトを10個紹介しています。日本の雑誌でもブログをやっているところは多いと思いますが、Twitterまでやっているところはあまりないでしょう。

雑誌サイトだけあってどれもデザインに凝っていますが、構成としてはシンプルなブログスタイルに落ち着いているものが多いようですね。

ブログのコメント欄のマークアップの仕方と、CSSによるデザインサンプルの紹介です。

4種類のデザインのHTML（＋CSS）＆画像ファイルのセットをダウンロードすることもできます。

コメントは番号付きリストでマークアップし、投稿者の名前や日付などの情報はまとめて「入れ子」にしておくと良いそうです。たしかにこれだと、CSSが適用されなくても見やすいですね。

Twitterのタイムラインも番号付きリストでマークアップされていますし、発言が並ぶようなコンテンツの場合はこういう組み方が主流なのでしょう。

デザインの優れた水平ナビゲーションメニューのショーケースです。作り込まれた、凝ったデザインのものが多いですね。

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

そのほか先週の記事から、jQueryを使ってフォームの機能を拡張するチュートリアルを二つ紹介します。

A Fancy AJAX Contact Form ? Tutorialzine
フォームの見た目をかっこよくするjqTransformと、値のチェックをするformValidatorというjQueryプラグインを利用したフォームを作るチュートリアルです。
Turn any webform into a powerful wizard with jQuery (FormToWizard plugin)
jQueryを使って、長いフォームを複数ページに分かれたウィザード形式に変えるテクニックです。