カーソルが乗ったときリンクの背景色が変わるようにしたい

解決済

質問者：yohta
質問日時：2008/08/23 03:22
回答数：5件

こんばんは、いまホームページを作っているのですがメニュー項目でカーソルが乗ったときに項目の背景色が変わるようにしたいです。下のサイトのようにです。
http://www.oxfordcity.co.uk/

リンク全部の色を一括で変えるのではなくて、上のサイトのように個別に変わる色を設定したいです。

ソフトはホームページ・ビルダー10を持っています。そして表を使ってメニュー項目を作成しました。そして表の枠を消して、見た感じは上のリンク先のサイトと同じようになっています。この表は使えますか？

あっ、あとリンクにアンダーラインが付いているのですがそれもも消したいです。

よろしくお願いいたしますm(_ _)m

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： panto-maim
回答日時：2008/08/23 16:01

提示されたサイトさんでは、表を使ってメニュー項目を作成しています。

１つのメニューに対して、それぞれ個別に作成したスタイルシートのクラス指定で設定して、背景色を変えています。
（メニューの数だけ作成・設定が必要。）

ビルダーのスタイルシートマネージャで設定するのでしたら、
こちらが参考になるかと思います。

リンクの下線を消す
http://www-06.ibm.com/jp/domino01/swhc/esupport. …

クラス別に設定する
http://hpb.web-creation.info/y1_class_b.html

メニュー分だけ「クラスのスタイルの設定」でクラス名を変えて複数作成し、
リンク文字に対してそれぞれクラス設定すればよいと思います。

オンマウス時での背景色を変えるには、
A：hover（クラス別の場合A.class名：HOVER）で
「スタイルの設定」→「カラーと背景」タブ→背景色の所を変えます。
（前景色の項目は”文字色”となります。）

なお、ビルダー10以前のスタイルシートマネージャ機能では、
display:block;やoutset、insetの設定ができません。（対応しているのはビルダー11以上から）
スタイルシートについての基礎的な知識があるなら、
ビルダーのHTMLソース画面（または「メモ帳」などのテキストエディタ）で入力して設定したほうが手っ取り早いかもしれません。
（スタイルシートマネージャで、ある程度設定しておき、ソース画面で不足している部分を追加入力することでも、設定できます。）

- 0
- 件

通報する

この回答へのお礼

回答どうもありがとうございます！遅くなってすみません。

今回はリンク先を参考にしてうまく設定することが出来ました。ビルダーで簡単に設定することが出来るのですね。ただ一つ不満があるとすれば、左右のパディングは設定できるのですが、どうしても上下のパディングを伸ばすことが出来ません。手書きでタグも編集してみましたが出来なかったので、出来ない仕様なのかも知れませんが・・

通報する

お礼日時：2008/08/31 01:29

No.5

回答者： panto-maim
回答日時：2008/08/31 03:25

>ただホームページビルダーにコピペすると、

>編集を加えるためには変換が必要だと求められ、
>大幅にタグを書き換えられてしまい、その後はhoverの機能を失ってしまいました。

かんたん配置モードで作成したページでしたら、
「どこでも配置モードで編集するためにページを変換します」というようなメッセージがどうしても出てしまい、
（ビルダーの仕様と思われます。）
上手くいきませんので注意してください。
（「変換します」に対してOKじゃなくキャンセルで返すと、タグを書き換えられることはないですが、
後々面倒なことになるやもしれません。）

標準モードで作成することができません（かんたん配置モードでしか作成・編集することができません）、
ということでしたらお役に立てないかも・・・。
個人的には、標準モードで作成するのがおすすめです。

ちなみに私の作成環境では、そのタグで何の問題もなく上手くいきました。
（編集スタイルはスタンダードまたはエディターズ、
標準モードです。）

- 0
- 件

通報する

この回答へのお礼

再度回答どうもありがとうございます！お礼が遅くなってすみません

なるほど、どこでも配置モードで編集していたからうまくいかなかったのですね！

どこでも配置モードが一番いいと決め付けて、今まで他のモードを試したことがなかったのですが、標準モードも使ってみようと思います。

通報する

お礼日時：2008/09/09 10:30

No.4

回答者： akios0823
回答日時：2008/08/23 21:22

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>カーソルを重ねると背景色が変わります。</title>
<style type="text/css">

</style>
</head>
<body bgcolor="#ffffff" text="#000000">
<table width="300" border="0" cellpadding="0" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td height="20" bgcolor="#67ADD0" onmouseover="this.style.backgroundColor='#A3C1E0'" onmouseout="this.style.backgroundColor=''" style="padding:5px 5px 5px 5px; font-size: 11pt; line-height: 15pt; border-bottom: #dedede 1pt solid;">
<a href="http://www.oxfordcity.co.uk/">オンマウスで背景色が変わります。</a></td>
</tr><tr>
<td height="20" bgcolor="#007E86" onmouseover="this.style.backgroundColor='#25BEC7'" onmouseout="this.style.backgroundColor=''" style="padding:5px 5px 5px 5px; font-size: 11pt; line-height: 15pt; border-bottom: #dedede 1pt solid;">
<a href="http://www.oxfordcity.co.uk/">オンマウスで背景色が変わります。</a></td>
</tr><tr>
<td height="20" bgcolor="#317B54" onmouseover="this.style.backgroundColor='#9ACAB1'" onmouseout="this.style.backgroundColor=''" style="padding:5px 5px 5px 5px; font-size: 11pt; line-height: 15pt; border-bottom: #dedede 1pt solid;">
<a href="http://www.oxfordcity.co.uk/">オンマウスで背景色が変わります。</a></td>
</tr><tr>
<td height="20" bgcolor="#336633" onmouseover="this.style.backgroundColor='#99CC99'" onmouseout="this.style.backgroundColor=''" style="padding:5px 5px 5px 5px; font-size: 11pt; line-height: 15pt; border-bottom: #dedede 1pt solid;">
<a href="http://www.oxfordcity.co.uk/">オンマウスで背景色が変わります。</a></td>
</tr><tr>
<td height="20" bgcolor="#736530" onmouseover="this.style.backgroundColor='#C0AA51'" onmouseout="this.style.backgroundColor=''" style="padding:5px 5px 5px 5px; font-size: 11pt; line-height: 15pt; border-bottom: #dedede 1pt solid;">
<a href="http://www.oxfordcity.co.uk/">オンマウスで背景色が変わります。</a></td>
</tr><tr>
<td height="20" bgcolor="#996633" onmouseover="this.style.backgroundColor='#CC9F6A'" onmouseout="this.style.backgroundColor=''" style="padding:5px 5px 5px 5px; font-size: 11pt; line-height: 15pt; border-bottom: #dedede 1pt solid;">
<a href="http://www.oxfordcity.co.uk/">オンマウスで背景色が変わります。</a></td>
</tr><tr>
<td height="20" bgcolor="#CC6633" onmouseover="this.style.backgroundColor='#DFA082'" onmouseout="this.style.backgroundColor=''" style="padding:5px 5px 5px 5px; font-size: 11pt; line-height: 15pt; border-bottom: #dedede 1pt solid;">
<a href="http://www.oxfordcity.co.uk/">オンマウスで背景色が変わります。</a></td>
</tr><tr>
<td height="20" bgcolor="#990000" onmouseover="this.style.backgroundColor='#E63D3D'" onmouseout="this.style.backgroundColor=''" style="padding:5px 5px 5px 5px; font-size: 11pt; line-height: 15pt; border-bottom: #dedede 1pt solid;">
<a href="http://www.oxfordcity.co.uk/">オンマウスで背景色が変わります。</a></td>
</tr><tr>
<td height="20" bgcolor="#A02075" onmouseover="this.style.backgroundColor='#C796B7'" onmouseout="this.style.backgroundColor=''" style="padding:5px 5px 5px 5px; font-size: 11pt; line-height: 15pt; border-bottom: #dedede 1pt solid;">
<a href="http://www.oxfordcity.co.uk/">オンマウスで背景色が変わります。</a></td>
</tr><tr>
<td height="20" bgcolor="#663366" onmouseover="this.style.backgroundColor='#CC99CC'" onmouseout="this.style.backgroundColor=''" style="padding:5px 5px 5px 5px; font-size: 11pt; line-height: 15pt; border-bottom: #dedede 1pt solid;">
<a href="http://www.oxfordcity.co.uk/">オンマウスで背景色が変わります。</a></td>
</tr><tr>
<td height="20" bgcolor="#424284" onmouseover="this.style.backgroundColor='#7CA8D3'" onmouseout="this.style.backgroundColor=''" style="padding:5px 5px 5px 5px; font-size: 11pt; line-height: 15pt; border-bottom: #dedede 1pt solid;">
<a href="http://www.oxfordcity.co.uk/">オンマウスで背景色が変わります。</a></td>
</tr><tr>
<td height="20" bgcolor="#3681CB" onmouseover="this.style.backgroundColor='#81C1FF'" onmouseout="this.style.backgroundColor=''" style="padding:5px 5px 5px 5px; font-size: 11pt; line-height: 15pt; border-bottom: #dedede 1pt solid;">
<a href="http://www.oxfordcity.co.uk/">オンマウスで背景色が変わります。</a></td>
</tr><tr>
<td style="padding:5px 5px 5px 5px; font-size: 11pt; line-height: 15pt; border-bottom: #dedede 1pt solid;" height="20" bgcolor="#ffffff">
オンマウスで背景色が変わります。<br>さらにテキスト文字にオンマウスで<br>文字色が変わり、クリックすると<br>リンク先にジャンプします。
</td></tr></table>
</body></html>

- 0
- 件

通報する

この回答へのお礼

回答どうもありがとうございます！遅くなってすみません。

こんなに長いタグを書いてくださってありがとうございます。そしてリンク先はまさに僕が求めていた感じです。ただホームページビルダーにコピペすると、編集を加えるためには変換が必要だと求められ、大幅にタグを書き換えられてしまい、その後はhoverの機能を失ってしまいました。

通報する

お礼日時：2008/08/31 01:35

No.2

回答者： yambejp
回答日時：2008/08/23 15:09

hoverをつかうのが一般的ですね

アンダーラインはtext-decorationです
こんな感じで・・・

<style>
#menu{
margin:0px;
padding:0px;
list-style:none;
}
#menu li{
display:inline;
}
#menu li a{
display:block;
width:200px;
font-weight:bold;
color:white;
text-decoration:none;
}
#menu1{background-Color:#ff0000;}
#menu2{background-Color:#00ff00;}
#menu3{background-Color:#0000ff;}

#menu1:hover{background-Color:#ffc0c0;}
#menu2:hover{background-Color:#c0ffc0;}
#menu3:hover{background-Color:#c0c0ff;}
</style>

<ul id="menu">
<li><a href="#" id="menu1">menu1</a></li>
<li><a href="#" id="menu2">menu2</a></li>
<li><a href="#" id="menu3">menu3</a></li>
</ul>

- 0
- 件

通報する

この回答へのお礼

回答どうもありがとうございます！遅くなってすみません。

hoverというのは今回始めて知りました。yambejpさんのタグをコピーしてビルダーに貼り付けたらうまく変換できて、文字を入れ替えたらそのままでも使えそうです。ありがとうございます。

通報する

お礼日時：2008/08/31 01:23

No.1

回答者： suzuko
回答日時：2008/08/23 14:43

同じことをしたいのならば、そのページのソースを参考にしてはいかがです？

HTMLはIEならば「表示」から「ソース」で見れますし、CSSもHEADにあり場所が書いてありますよ。
http://www.oxfordcity.co.uk/sys/styles/advanced_ …

- 1
- 件

通報する

この回答へのお礼

回答どうもありがとうございます！遅くなってすみません。

最初にソースを保存して拡張子をHTMLに直して、ブラウザで開いてみたんですよ。そうしたら全然違う感じになってしまって(カーソルを乗せても変わらない、文字飾りが消えている等)

cssも保存できるんですね、知りませんでした。ありがとうございます。

通報する

お礼日時：2008/08/31 01:20

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！