背景画像を使ったボタンの作り方（DreamweaverでCSS）

動画マニュアルで、スタイルシートを使ったwebデザインの定番ともいえるテクニックをいくつか紹介しましたので、こちらでも解説します。

スタイルシート　定番テクニック集 >> （1）背景画像を使ったボタンの作り方

スタイルシートなので、もちろん、エディタだけを使って作ってもokですが、この講座はDreamweaverの講座なので、ドリームウィーバーのエディタ機能を使って効率よくやってみましょう。

１回目は、画像を使ったボタン。マウスオーバーで色が変わります。
CSSでの背景画像を使って、マウスオーバー時には、背景画像の位置指定を変えて、色が変わるような動きをつけています。
ボタンのテキストは、text-indentで大きな数字を入れて飛ばして、一見非表示にしています。
――――――――――――――――――――――――――――――――――

#button {
text-indent:-2000px;
}

#button a,#button a:link,#button a:visited{
display:block;
height:23px;
width:102px;
background:url(img/button.gif) no-repeat 0px 0px;
}
#button a:active,#button a:hover{
background:url(img/button.gif) no-repeat 0px -25px;
}

――――――――――――――――――――――――――――――――――

<div id="button"><a href="#">掲示板</a></div>
――――――――――――――――――――――――――――――――――

動画の最後で、画像をどんなふうに作ってあるかも紹介してますので、参考にしてみてくださいね。

こちらが使用した画像です



最近作った大阪のポータルサイトです。
京橋タウンガイド
グローバルナビゲーションの上にある３つのボタンは、今回の動画で紹介した方法で作りました。

＊＊＊＊＊

このサイトはxoopsで構築しました。
地図やおすすめメニューなどのついたショップガイド、各お店からの新着ニュースや、クチコミ投稿、求人情報や、イベント・タウンガイドなどの機能が盛りだくさん。
URLの静的生成と正しいマークアップでseo対策済み。携帯にも対応しています。

xoopsを使った様々なポータルサイトの構築も受けていますのでお気軽にご相談ください。
デザイン：webの森
協力／xoopsシステム構築：A-XYZ