CSS
無料お問合せはこちらから TEL 075-257-4588 営業時間 AM9:30~PM6:30

スタッフブログ | リストメニューを画像で作ったメニューボタンのように見せる方法3!
スタッフブログ
リストメニューを画像で作ったメニューボタンのように見せる方法3!

リストメニューを画像で作ったメニューボタンのように見せる方法3!
前回はテキストリンクをメニューボタンのように見せる方法を
お伝えしました。
前回→http://www.ryuumu.co.jp/ryuumu/stuffblog/e360.html
今回はさらにもう一工夫!マウスが乗ったら背景色を変更しましょう。
背景色の変更といってもリンクテキストだけではなく、
前回やったリンクが有効になっているブロックの背景を変更します。

今回も分かりやすくする為に、リストの背景は画像ではなく色にします。

まず前回同様、普通にリストを書きます。

リストの書き方

このままだと、文字にだけリンクが貼られている状態ですね。

では次にスタイルシートです。

リストメニューを画像で作ったメニューボタンのように見せる方法 CSSの書き方例

前回と違うところは、a:hoverが追加されたことです。
リストのリンクタグで、hover(マウスがのった時)の動きをどうするか、という指定をしています。
これも普通のリンクと同じように指定できますが、その前のリンクタグにdisplay:blockを指定しているので
リンクタグ内がブロック(長方形の形をした表示領域)になっている為、ブロックの背景色が変化しているのです。
ためしに、li aのdisplay:blockを削除してみてください。
リンクテキスト部分の背景しか色が変化しませんね?
 
いかがでしょうか?
普通のテキストリンクで物足りなくなった場合、このような装飾をすることで、デザインも見やすくなりますね!
  
ではまた次回!

| http://www.ryuumu.co.jp/ryuumu/stuffblog/index.php?e=362 |
| ソース(ホームページ)のレシピ by 委員長! | 06:30 PM | comments (x) | trackback (x) |

<< PAGE TOP >>

BACK UP 初心者でホームページを考えてられてる方へ

独自ネットショップや楽天ショップ・YAHOOショップ運営される初心者の方も、無料で、親切にアドバイスいたします。
SEO・月次更新・リニュアルetc

ホームページ制作の事なら

何でもお問合せください。
お問合せフォームはこちらから

リュウム株式会社

京都市中京区橋弁慶町222番地
ヒライビル3階

TEL 075-257-4588
営業時間 AM9:30-PM6:30

無料お問合せはこちらから TEL 075-257-4588 営業時間 AM10:00~PM7:00

スタッフブログ | リストメニューを画像で作ったメニューボタンのように見せる方法3!
CSS