2007-04

シリーズもの第三弾が発表されていました。ウェブ製作に使えるちょっとした小技集です。パート1と2もあわせてどうぞ。

• 小粋なインターフェースを実現する25のコード
• 小粋なインターフェースを実現する25のコード （パート2）

今回も全部で25個ありますが、気になったものをいくつかピックアップ。

↑ Flickrのようにクリックするとその場で編集できるようにする方法。

↑ テキストがフェードイン、フェードアウトしていくような効果を作る方法。

↑ CSSだけで上のようなボタンを作る方法。

↑ CSSだけでリストをこのようなツリーのようにする方法。

全部見たい方は以下からどうぞ。一度試しておくと技の幅が広がりそうですね。

» 25 Code Snippets for Web Designers (Part3)

CDやDVDのジャケットを検索できるAllCDCoversには、随所におっとするようなインターフェースの工夫が見られます。100SHIKI PR Board参加ブログであるsta la staでも紹介されていましたが、その検索結果が複数ページにわたっている場合の表示が印象的だったので、エントリー。

» AllCDCovers

検索結果が複数ページにわたっている場合、自分が見たい結果があるページを探すためには、一ぺージずつ見ていくか、「ここらへんか」と推測してページを選んでいくかしなければなりません。でも、このAllCDCoversでは、ページ番号にマウスをのせると、「○○～○○」とそのページの最初と最後のものを表示してくれます。

↑ ページ番号にマウスをのせると、そのページの最初と最後のものがポップアップで表示される。

これならリンク先にとぶ前に、ある程度あたりをつけることができます。

そもそも、リアルの検索、たとえば電話帳やカラオケの歌本などをぱらぱらめくるとき、まず索引の頭文字をさがして、その中のページの最初と最後を見ながらさらに範囲をせばめていくという行為をしているわけですが、画面という制約の中でそれをどうやって実現していくかに、こういう工夫を思いつくヒントがありそうですね。