ホームページを作る人のネタ帳

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

dezinerfolio

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

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

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

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


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

サンプルはこちら

CSSタブメニュー

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

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


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


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

タブ作成


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

DOWNLOAD



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

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


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

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


個性派には・・・


ある意味可変してくれます。
CSS Dock Menu
CSSタブジェネレータ

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


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


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

@yamada_nt
Posted by@yamada_nt
スポンサードリンク

Comments 0

There are no comments yet.

Leave a reply