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

1. Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | Graphicshttp://www.hongkiat.com/blog/drop-down-menu-30-free-scripts-to-enhance-header-navigation/

ドロップダウン（プルダウン）メニューを作る方法を多数紹介しています。CSSだけのもの、CSSとJavaScriptで実装しているものが紹介されており、jQuery、MooTools、PrototypeといったJavaScriptライブラリごとにわけて掲載されています。

ドロップダウンしたエリアからカーソルが外れた場合、すぐに消えずにちょっと待ってくれるかどうかが重要だと個人的に思っているので、そのことを基準に掲載されたメニューを調べてみました。Superfish、(mb)Menu、MenuMaticはそういった挙動となっているようです。

Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Readyは、ドロップダウンしたエリアのさらに下の階層が、iPodみたいに横スクロールで現れるようになっていて面白いですね。

ドロップダウンの作り方のチュートリアル記事や、オンラインで作成できるジェネレーターも紹介されています。

2. 【TB企画】これまでに使った便利なjQueryプラグイン | THE HAM MEDIAhttp://h2ham.seesaa.net/article/124862651.html

使ったことあるjQueryのプラグインを書いてトラックバック（TB）し合いましょうという企画です。このページだけでも十分なくらい、便利なjQueryプラグインがまとめられています。

ただのまとめではなく、「⁠使ったことがある」ということでふるいにかけられているところがいいですね。

ちょっとこの企画の敷居が高いのか、現時点ではあまりトラックバックは集まってないようです。しかし、はてなブックマーク数は多いですし、Webデザイナーからの注目度は高い企画なはずです。

3. 5 CSS tricks with lists | Pieter Beulquehttp://www.pieterbeulque.be/blog/css/5-css-tricks-with-lists

リスト要素ul、ol、dlの見た目をCSSで変えるテクニックが紹介されています。

ul、ol、dlの頭の文字がunordered、ordered 、definitionから取っているということを、いまさらながら知りました。「⁠L」はもちろんlistのLですね。

紹介されているテクニックは、以下の5つです。

1. 番号付きリストの番号に別のスタイルを定義する
2. リストをロールオーバー効果のあるボタンにする
3. リストの最後の項目だけ消えていくような見た目にする
4. 定義リストを価格表のような表示にする
5. リストを段組にして表示する

4. Sticky (Fixed) SideNav Layout with CSShttp://designm.ag/tutorials/sticky-sidenav-layout/

サイドメニューの位置を固定して、コンテンツ部分だけがスクロールするページの作り方のチュートリアルです。

基本的にはCSSの「position: fixed」で簡単に実現できるテクニックですが、IE6が対応していないのであまり使われていないのかもしれません。また、固定した領域の高さがウィンドウの高さより大きいと、画面に入りきらない部分を見ることができないという問題が起きる可能性があります。

IE6対策には、IE限定のスクリプトをCSS中に書くというCSS Expressionを使うのが定番のようで、ここでもその方法が使われていました。また、サイドメニューがウィンドウより高かった場合の対策は、jQueryを用いてJavaScriptで行っています。

5. 25 Magazine-Style Layouts for Your Design Inspiration | Vandelay Design Bloghttp://vandelaydesign.com/blog/galleries/magazine-layout/

雑誌や新聞風レイアウトのWebサイトのデザインギャラリーです。CMSやブログシステムで構築された、雑誌風レイアウトのサイトが増えているようです。

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

そのほか先週の記事から、いろんなサイトギャラリーを紹介します。

• 10 Super-Simple Web Designs | Web Design Blog by Union Room Web Design
  シンプルなデザインのサイトギャラリーです。
• 60 (Latest) Beautiful and Enticing Blog Designs | Inspiration
  美しく魅力的なブログデザインのギャラリーです。
• 30 Fresh and Inspirational Portfolios With A Twist | Design Showcase | Smashing Magazine
  ポートフォリオサイトのデザインギャラリーです。

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

twitterで読書記録。読んだ4!http://yonda4.com/

日本でもTwitter関連のWebサービスがいろいろ登場して盛り上がりを見せています。そんな中、発想がすばらしいと思ったのがこの「読んだ4!」です。

Twitterで書名をつぶやくだけで読書の記録が取れるというサービスで、「⁠@yonda4 断る力 面白かった」のように「読んだ4!」のIDあてにtwitter上で書名と感想などのコメントをつぶやくと、自分の読書履歴が「読んだ4!」に蓄積されていきます。

「読んだ4!」のサイト上では、自分の読書履歴を一覧で見たり、同じ本を読んでいるほかのユーザーを探したりできるわけです。著者名や表紙画像などはAmazonからひっぱってきているようですね。Amazonのその書籍へのリンクも張られるわけですが、なんと自分のアフィリエイトIDを設定することもできるんだとか。

「読んだ4!」は「よんだよん！」ではなく「よんだよ！」だそうです。

最近登場した日本のTwitter関連のサービスに興味のある方は、「⁠「Twitter」公開APIを利用して　関連の日本語サービスが続々と登場：CodeZine」もご参考に。