締切済み

ホームぺージ作成について

2011/06/09 23:38

http://www.helper0123.com/ ↑このＨＰの左側にある「ホームヘルパーとは」とか「ホームヘルパー2級は廃止なの？」にマウスポインタをもっていくと背景が橙色(!?)に反転します。私はビルダー７でホームページを作成しているのですが、この反転を自分のＨＰにも取り入れたいのです。どうすれば出来るのでしょうか？教えてください！！

kusuri16
お礼率8% (38/446)

ホームページ作成ソフト
回答数4
ありがとう数0

みんなの回答 （4）
専門家の回答

みんなの回答

Z31
ベストアンサー率37% (735/1957)

2011/06/10 11:03 回答No.4

LINK文字へマウスを乗せた時に背景色を変えるのは、スタイルシートマネージャーのA:HOVERを使います。 Ver7ではメニューの「表示」「スタイルシートマネージャー」を開いて「追加」ボタンをクリック。右上の「HTMLタグの候補」で「マウスが上にあるリンク　A:HOVER」を選ぶ。「色と背景」タブで「背景色」で色を選びます。以上で、リンクを取った文字列の背景色が変わります。しかし、文字列の部分しか変わりませんので、セルの中の空白部分を「ブランクキー」で「空白」を入れれば、セル全体が文字列となりますので、セル全体をリンク取れば、セル全体のが色が変わります。目次は当然「表」を使うことが前提ですが。

参考URL：: http://www.wsb.jp/hpb/

naokita
ベストアンサー率57% (1008/1745)

2011/06/10 01:13 回答No.3

ナビゲーションでは定番です。１、リストで、<ul><li><a>でナビメニューを作る。２、CSSで指定する。　　li a:hover { background:#FFA500;} その他、文字色や大きさなど色々と変化させる事が可能です。後は、応用して下さい。 <head> <style type="text/css"> li a { display:block; width:15em;} li a:hover { background:#FFA500;} </style> </head> <body> <div> <ul> <li><a href="">ホームヘルパーとは</a></li> <li><a href="">ホームヘルパー2級は廃止なの？</a></li> </ul> </div> </body>

megane3333
ベストアンサー率46% (58/124)

2011/06/10 01:05 回答No.2

リンク要素に対し、マウスオーバー( hover )の状態の時に、スタイル( 見かけ )を変更するようにスタイルシートが記述されています。以下、質問のサイトのスタイルシートの部分。 #menu li a { line-height: 16px; display: block; font-size: 12px; text-decoration: none; color: #333333; padding: 5px 6px; background-image: url(img/menu_bg.jpg); background-repeat: repeat-x; background-position: left bottom; margin: 0 0 1px 0; background-color: #FFFFFF; border: 1px solid #D6D6D6; } #menu li a:hover { background-color: #FFC773; border-top-color: #ACACAC; border-right-color: #D6D6D6; border-bottom-color: #D6D6D6; border-left-color: #ACACAC; background-image: none; } スタイルシート、ここまで。カッコ { } でくくっているブロックの上の方が、通常時の状態で、下のブロックがマウスオーバーの状態を指定したものです。通常時では、menu_bg.jpg　画像を背景に設定しています。マウスオーバー時には、背景をオレンジ色( #FFC773 )に設定しています。さて、ここまでの説明で、いかがでしょうか？難しいでしょうか。実際のサンプルを以下に書いてみますね。今回のような表現をするには、HTMLファイルと、CSSファイルの２つが必要になります。＜HTMLファイル＞　sample.html <html> <head> <title>無題ドキュメント</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <ul id="menu"> <li><a href="about.html">このサイトについて</a></li> <li><a href="sitemap.html">サイトマップ</a></li> <li><a href="contactus.html">お問い合わせ</a></li> </ul> </body> </html> ＜CSSファイル＞　style.css #menu li a { line-height: 16px; display: block; font-size: 12px; text-decoration: none; color: #333333; background-color: #FFFFFF; } #menu li a:hover { color: #000000; background-color: #FFC773; } 以上の２つのファイルを保存してHTMLファイルをブラウザで開いてみてください。期待した動作になっていると思います。ビルダーは使ったことがないので、どうやってCSSファイルの編集などを行っているかは不明です。すみません。