![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
お世話になっております。fc2でblogを運営しているものです。
テンプレートをいじってロールオーバーボタンを作ってみたいのですがどうしてもできません。
以下ソースになります。
HTML:
<!--navi-->
<div id="navi">
<div class="navi01">
<a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン トップ" border="0" width="120" height="30" /></a>
</div>
<div class="navi02">
<a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン イラスト" border="0" width="120" height="30" /></a>
</div>
<div class="navi03">
<a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン マンガ" border="0" width="120" height="30" /></a>
</div>
<div class="navi04">
<a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン その他" border="0" width="120" height="30" /></a>
</div>
<div class="navi05">
<a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン 掲示板" border="0" width="120" height="30" /></a>
</div>
<div class="navi06">
<a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン メール" border="0" width="120" height="30" /></a>
</div>
</div>
<!--navi-->
CSS:
#navi {
margin : 0 auto;
margin-top : 5px;
width : 800px;
}
.navi01 {
float : left;
margin-left: 15px;
}
.navi02 {
float : left;
margin-left: 10px;
}
.navi03 {
float : left;
margin-left: 10px;
}
.navi04 {
float : left;
margin-left: 10px;
}
.navi05 {
float : left;
margin-left: 10px;
}
.navi06 {
float : left;
margin-left: 10px;
}
です。navi01~navi06までがボタン。それをnaviでグループ化しているイメージです。
○○○○○○には当然ソースが書いてあります。各ボタンのロールオーバー用ボタンは用意してあります。
どのようなHTML、CSSを書けばよろしいでしょうか。よろしくお願いいたします。
No.2ベストアンサー
- 回答日時:
そういうのは、
リストにして、
aをblockレベル表示にし、
hover時にaのbackground-imageを入れ替えることで実現する、
というのがメジャーだと思います。
<style type="text/css">
<!--
#navi {
margin : 5px auto 0;
padding: 0;
width : 800px;
list-style-type:none;
overflow:hidden;
}
#navi li{
float:left;
}
#navi li a{
display:block;
width:120px;
text-align:center;
background: #fee url() no-repeat left top;
}
#navi li a:hover{
background: #eff url() no-repeat left top;
}
#navi li a:link,
#navi li a:visited,
#navi li a:hover,
#navi li a:active{
text-decoration:none;
}
.navi01{
margin-left: 15px;
}
.navi02{
margin-left: 10px;
}
.navi03{
margin-left: 10px;
}
-->
</style>
</head>
<body>
<ul id="navi">
<li class="navi01"><a href="http://www.google.co.jp/">Google</a></li>
<li class="navi02"><a href="http://www.yahoo.co.jp/">Yahoo!!</a></li>
<li class="navi03"><a href="http://www.msn.co.jp/">MSN</a></li>
</ul>
</body>
</html>
この例はhover時にbackground-colorを替えていますが、
url()の中身を替えるようにすれば画像で行なえます。
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_11.png?e8efa67)
No.1
- 回答日時:
私もよくわからないですが、
JavaScriptを使わない場合
http://css-happylife.com/archives/2008/0602_1737 …
JavaScriptを使う場合
http://css-happylife.com/archives/2007/0621_0010 …
こちらを参考にされては、いかがでしょう。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・スタッフと宿泊客が全員斜め上を行くホテルのレビュー
- ・【大喜利】【投稿~8/27】 こんなガソリンスタンド二度と来るか!なぜそう思った?
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・【お題】動物のキャッチフレーズ
- ・【お題】甲子園での思い出の残し方
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・「それ、メッセージ花火でわざわざ伝えること?」
- ・自分用のお土産
- ・人生で一番お金がなかったとき
- ・一番好きなみそ汁の具材は?
- ・泣きながら食べたご飯の思い出
- ・ちょっと先の未来クイズ第1問
- ・ゴリラ向け動画サイト「ウホウホ動画」にありがちなこと
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
bloggerブログで画像の枠を消す...
-
ブログ記事内に文章を左右2列に...
-
ライブドアブログにおいて記事...
-
アメブロでブログタイトル上部...
-
gooブログで月別アーカイブを纏...
-
あらかじめ用意したテンプレー...
-
fc2掲示板 「メッセージ表示...
-
ココログでのCSS編集
-
FC2ブログでプロフィールが2つ...
-
Becky!ver.2で、返信・転送用テ...
-
<至急お願いします!>Wordでテン...
-
三つ折りのリーフレットを作りたい
-
改ざんは修正や訂正という意味...
-
ライブドアブログのテンプレー...
-
Wordに強い方へ!英文履歴書で...
-
Powerpointの表のスタイルで好...
-
ブログの文字を大きくしたい
-
出金伝票のテンプレート
-
FC2ブログの記事の書き方
-
FC2ブログの両端の余白の消し方
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
中央寄せの解除
-
ライブドアブログのサイドバー...
-
FC2のテンプレで質問です。
-
ブログ記事内に文章を左右2列に...
-
ブログのデザインがずれる原因
-
FC2ブログの右サイドバーが落ちた
-
Jugem カスタマイズ(背景)
-
アンドロイドで文字が左に偏る。
-
fc2ブログ タイトルを枠で囲み...
-
FC2ブログのテンプレートを...
-
ブログに背景壁紙画像を設定し...
-
FC2のテンプレ
-
ライブドアブログにおいて記事...
-
アメブロcss 3カラムを2カラム...
-
FC2ブログのサイドメニューの調整
-
fc2ブログ背景色変更
-
FC2ブログのテンプレ編集/幅調...
-
HEAD・HTMLの行間改行が上手く...
-
HTML、テーブルが下に落ちます。
-
FC2ブログ ブラウザの違い
おすすめ情報