『Dezinerfolio流』自動的に横幅を調節してくれるCSSタブメニューの作り方
2007年10月24日 公開
いつも購読している海外のブログ記事ですが、図つきでわかりやすく紹介されています。
こういうのは過去にもいくつか見た事がありますので『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を作る人のメモ帳を更新しましたが・・・。
いつの間にページランク3に・・・。
記事数少ない上、バックリンクもそんなに無いんですが、謎だ・・・