« ロールオーバーでフォーカスする表現 | トップページ | 簡単!CSSでデザインされたメニュー »

2008.01.29

Windows Vista風のツールバー

Windows VistaのツールバーをCSSで再現する

早いもので間もなく1月も終わってしまいます。この前、年が明けたと思ったいたのに…、歳でしょうか。
なんだかんだとバタバタしておりましてなかなか時間が取れず…、今回はちょっとしたテクニックを紹介してみます。

2月号のWeb creatorsに紹介されていますが、blog.itookia.comさんの「How to create VISTA style toolbar with CSS」というページからVISTA_toolbar.zipをダウンロードすると、手軽にデザイン性にも優れたツールバー(メニューバー)が作れます。
さすがにこのままでは仕事には使えませんが、個人的なページとかサンプルとして提案するくらいには利用できそうです。
もちろんスタイルシートや画像を変えればカスタマイズもできます。

サンプルはこちら

↑このデータはこちらからダウンロードできます。

ちなみにこのサンプルでは、各項目の幅は120pxまで対応しているようです。

|

« ロールオーバーでフォーカスする表現 | トップページ | 簡単!CSSでデザインされたメニュー »

コメント

どうやって日本語を表示できますかね?

投稿: みゅ | 2008.07.12 20:38

みゅさん、コメントありがとうございます。

> どうやって日本語を表示できますかね?
普通に表示できるハズですが…。
ご質問の意味が分かりかねます。

投稿: exyz | 2008.07.12 21:08

 ダウンロードさせていただいたのですが、標準だと左構えになっています。中央構えにしたいのですが
toolbar.cssの
#vista_toolbar {
float:right;
の部分をcenterにしたのですが上手くできません。
どのようにすれば中央構えになりますか?

投稿: ソール | 2008.11.09 14:12

ソールさん、コメントありがとうございます。

ツールバー自体が中央揃えにならないというコトですか?
それならば、#vista_toolbarを下記のように書き換えてみて下さい。

#vista_toolbar {
font:normal 12px 'Trebuchet MS', 'Arial';
margin:0px auto;
padding:10px 0px;
width: 360px;
}

※widthは、このサンプルの幅に合わせています。実際の物の幅にしてください。


ちなみに、floatには、leftとrightしか値はないので、centerとしても意味がありません。

投稿: exyz | 2008.11.09 17:25

 お早い返信ありがとうございます。
>> ツールバー自体が中央揃えにならないというコトですか?
そうです、説明不足ですいません^^;
 記載されたとおりにすると無事中央構えにできました!ありがとうございました。
 floatにはleftとrightしかないのですね^^;勉強になります。

 どうもありがとうございました。

投稿: ソール | 2008.11.09 17:49

ソールさん、再びありがとうございます。

上手くいったようで良かったです。

ちなみに、floatとは、文字通り下の要素から浮かせて表示させるという意味です。

その場合に下の要素を、左側に回り込ませるのか、右側に回り込ませるのか、という指定が出来るだけです。

左寄せや右寄せという意味ではありませんので、ご注意下さい。

投稿: exyz | 2008.11.09 18:05

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35737/17888747

この記事へのトラックバック一覧です: Windows Vista風のツールバー:

« ロールオーバーでフォーカスする表現 | トップページ | 簡単!CSSでデザインされたメニュー »