スポンサード リンク
www.flickr.com
BLOG DRINKING I Think INTERNET MUSIC PERSONAL Photo Words&Tips

September 20, 2003

List-o-maticを使ってCSSを利用したリストメニューを簡単に作成

スポンサード リンク

サイトの作成時にメニュー部分を画像でなくシンプルにテキストにすることが多い。それでも、マウスを乗せたときなど変化があわられるようにするにはCSSを使ったりしないといけないのでけっこう大変。そんなときList-o-maticを使うと便利そう。

作りたいメニューの数を選んで、それぞれに項目とURLを入れていくとデザインを10個のなかから選んでメニューが作成できる。
list-o-matic3.jpg

縦型のメニューでは5つのスタイルが作成できる。

vertical .jpg

横型のメニューも5種類。

horizontal .jpg

スタイルシートとHTMLのコードも表示してくれるから、デザインをいろいろ試すときに利用するとよさそう。

list-o-matic2.gif

list4.jpg list5.jpg

もちろん日本語の項目を入れても大丈夫。

listj.jpg

作成した例はこんな感じ。

Style1 Style2
Style3 Style4
Style5 Style6
Style7 Style8
Style9 Style10



Posted by kengo at September 20, 2003 11:43 PM | TrackBack | BLOG | Blog Search | English | QR | append.gif このエントリーを含むはてなブックマーク | delicious.gif twitter.png Skype のテキストチャットでコメントする

Comments
Post a comment
Note to spammers: Any URL in Comment is No effect on your Google PageRank. And your inappropriate comments will be deleted and blacklisted and IP will be Banned.

My status
callstart24x24.png message24x24.png voicemail24x24.png addcontact24x24.png info24x24.png
世界中どこでも無料通話!Skype.com


Twitter経由でコメントする

mailicon2.png
メールの場合はこちらまで

Google Talk からメッセージを送る
gtalkcall.png Call gtalkchat.png Chat


タイトルと URL をコピーして貼り付けてください
Donations
Paypalやはてなポイントを利用したDonationを歓迎します。

はてなポイント



Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 2.1 Japan License.
t eXTReMe Tracker