CSSで作成するタブナビゲーション （exploding boy）

CSSレイアウトを利用したタブデザインの作成方法は一度慣れてしまえば、スタイルシートを利用したレイアウトにも応用できるので、一度は実際に作ってみると良い。タブのデザインを考えるときにも参考になるのが、exploding-boy.comのサンプル。

2種類のデザインパターンが公開されているので、好きなほうを参考にすると良い。公開時期はそれほど新しくないが、それほど古さを感じないデザインになっている。ある程度フォントサイズを大きくしても崩れないようにデザインされているので、そのままでも利用できる。

ダウンロードファイルの中身
CSSmenus2をダウンロードすると、サンプル画面で参照したタブデザイン用のGIFイメージがすべて入っている。CSSコードはサンプルのHTML中に直接記述されているので参考になる。
アプリケーションで簡単にタブデザインソースを作成することも可能だが、CSSを勉強したいユーザには良いサンプルになる。

youmos.comのデザインもこうしたCSSレイアウトを応用していく事で作成している。基本をマスターすればリキッドレイアウトにも対応したコンテンツでも対応できる。