パーツデザイン　その２

Posted by: kenschool
2010年10月25日 23:12
デザイン

それでは前回の続きです。

前回はアップ画像まで完成しました。

今回はオーバー画像を作成して、実際にロールオーバーをさせてみます。

前回のファイルを開きます。

一番上に新規レイヤーを作成し、角丸長方形ツールで図形を描画をします。

（色は文字と同じ赤#be3019、角丸の丸みは2px程度）

そこにかなり太めのストライプをつけます。これはStripe Generator 2.0 betaを

利用するまでもないのである程度手描きで大丈夫です。

ラインツールなどを利用しましょう。

文字のレイヤーをコピーして一番上に移動し色を白に変更します。

任意で小さな四角形も白で描き直しましょう。

これでオーバー用画像の完成です。

「Webおよびデバイス用に保存」で保存します。

それでは実際に画像を使ってみます。

まずは下記のHTMLを書き任意の名前で保存します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ロールオーバーの練習</title>
</head>
<body>
<p><a href="http://www.kenschool.jp/Webdtp/index.html" id="webdtp">Web・DTPコース</a></p>
</body>
</html>

CSSファイルを作成し、下記の記入をします。
※アップ用画像（btn_up.jpg）、オーバー用画像（btn_over.jpg）
※両方ともにimagesフォルダ内に保存しています。

#webdtp {
background: url(images/btn_up.jpg);
text-indent: -9999px;
display: block;
height: 32px;
width: 159px;
}
#webdtp:hover {
background: url(images/btn_over.jpg);
}

ブラウザで確認してください。

下記の完成例のようにロールオーバーするボタンが作成できます。