『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を作る人のメモ帳を更新しましたが・・・。
いつの間にページランク3に・・・。
記事数少ない上、バックリンクもそんなに無いんですが、謎だ・・・
新ブログ:ITクオリティもよろしく。
この記事のコメント (0)
スポンサード リンク
![]() |
![]() |
![]() |

» タッチパネルWindows7のデモビデオ
» webサイト作成時にサイトカラーを決められない人の為のwebサービスいくつか
» セキュリティソフトのカスペルスキーがいかに強気なのかを確認できる一覧[ネタ]
» [これすご]70のphotoshop修正テクニック
» 旭川で行われたMicrosoftのセミナーに壮大に釣られた
» ブロガーは2クリック以内にワンクリック詐欺サイトに到達する可能性が高い
» Adobe Fireworks(8)のweb2.0なレイヤースタイル131+48個+おまけ
» アメブロのブログマナー定義がどうも腑に落ちない
» FLASHベースのリッチテキストエディタ『obedit』
» 画像にメッセージを埋め込むflickr見たいな機能のJavaScript
» 7月と言えば『まとめ祭り』ということで、まとめエントリーをまとめました
» 『こんなwebサイトは嫌だベスト20』をチェックシート化して現場に持っていこうと考えてPDF形式で作った
» 『YouTubeを見ている全てのユーザー視聴情報をバイアコムへ』米国法廷が裁決。
» [ゲーム脳]DS版ディスガイアが本当にヤバイ理由を懇々と説明するよ
» 相手サイトのサムネイル画像を簡単にブログにはるタグを作るeパレット2
Comment















