WEBサイトのリスト・メニュー。ドロップダウンなどのCSSデザイン

WEBサイトのナビゲーション用に、横にリンクが並んだメニューが一般的ですが、これを<ul>などのタグとCSSで構造的にやろうとすると、なかなか大変。CSSをまだまだ勉強中ということもありますが、Mac + FireFoxなどで確認しながらデザインを決めていて、Mac + IEで再確認すると、デザインが崩れて、なんじゃこりゃ〜っというような状況に。そんな時に見つけたのがこのサイト。

css.maxdesign.com.au - CSS resources and tutorials for web designers and web developers

The Zen of CSS Designのように、単純な<ul>リストを、CSSだけで色々なバリエーションにデザイン。

かなり沢山のデザインがリストされているので、まずは色々なブラウザでチェックしつつ、自分の好きなデザインの参考にすることが可能。ステップ by ステップのチュートリアルもあります。

Listutorial: Tutorial 1 - Background images for bullets - Step 1 - Make a basic list

同時に、これからの標準もきっちりと押さえておきたいところ。

Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト

益子 貴寛

秀和システム 2005-07

by G-Tools