『Dezinerfolio流』自動的に横幅を調節してくれるCSSタブメニューの作り方

いつも購読している海外のブログ記事ですが、図つきでわかりやすく紹介されています。

こういうのは過去にもいくつか見た事がありますので『Dezinerfolio流』と名づけておきます。

ようするにCSSタブメニューの横幅を、中に書かれたテキストによって、自動的に幅を調整すると言うもの。
タブメニューは結構使うようになってきたので覚えておいて損はないですよね。

もうタブの画像生成に悩まない

実際タブメニューは結構使いますので、これでひとつまた作業が楽になります。
タブの画像も、海外では無数に配布されていたり、生成できたりしますので、利用頻度は高いかと。

サンプルはこちら



図つきのため本当にわかりやすくなっています。

ソースコードはエントリに書かれていますので、そちらを参考にしてください。
Creating Liquid CSS Tabs for Menus

もしもタブを作るのがそもそも面倒なら・・・

タブ作りが面倒なら一度フリーのタブCSS＆HTML生成ソフトでも使ってみてはどうでしょうか。
OverZone Software - CSS Tab Designer
このあたりがお勧めですね。




使うデザインを選んでいくと、自動的にCSSとHTMLで表示してくれます。
WindowsXPで軽快に動作していますが、他のWindowsでも使えそうです。






タブメニューCSSの無料配布サイトも。
CSS Menus, css menu


いっぱいありますね。無料で・・・。


インストールも面倒だと言う人がいるならTab Generatorが簡単かも。
Navigation Tab Menu Generator CSS - Tabs Generator


色々といじれますので、自分好みのタブを作れそうですよ。

個性派には・・・

ある意味可変してくれます。
CSS Dock Menu


個性派の人はこういうのがいいでしょうか・・・。ドックです。


JavaScriptでタブ自身が伸び縮みするというものも昔ありましたね。
javascriptで伸縮するメニューができる : webデザイナーのナナメガキ

独り言
半年振りにPHPを作る人のメモ帳を更新しましたが・・・。
いつの間にページランク３に・・・。
記事数少ない上、バックリンクもそんなに無いんですが、謎だ・・・