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

締切済

質問者：kusuri16
質問日時：2011/06/09 23:38
回答数：4件

http://www.helper0123.com/

↑このＨＰの左側にある「ホームヘルパーとは」とか「ホームヘルパー2級は廃止なの？」にマウスポインタをもっていくと背景が橙色(!?)に反転します。

私はビルダー７でホームページを作成しているのですが、この反転を自分のＨＰにも取り入れたいのです。
どうすれば出来るのでしょうか？

教えてください！！

通報する

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

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.1

回答者： te2kun
回答日時：2011/06/10 00:17

CSSを使ってあります。

参考URL：http://hpbuilder.net/

- 0
- 件

通報する

No.2

回答者： megane3333
回答日時：2011/06/10 01:05

リンク要素に対し、マウスオーバー( 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ファイルの編集などを行っているかは不明です。
すみません。

- 0
- 件

通報する

No.3

回答者： naokita
回答日時：2011/06/10 01:13

ナビゲーションでは定番です。

１、リストで、<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>

- 0
- 件

通報する

No.4

回答者： Z31
回答日時：2011/06/10 11:03

LINK文字へマウスを乗せた時に背景色を変えるのは、スタイルシートマネージャーのA:HOVERを使います。

Ver7ではメニューの「表示」「スタイルシートマネージャー」を開いて「追加」ボタンをクリック。
右上の「HTMLタグの候補」で「マウスが上にあるリンク　A:HOVER」を選ぶ。

「色と背景」タブで「背景色」で色を選びます。

以上で、リンクを取った文字列の背景色が変わります。しかし、文字列の部分しか変わりませんので、セルの中の空白部分を「ブランクキー」で「空白」を入れれば、セル全体が文字列となりますので、セル全体をリンク取れば、セル全体のが色が変わります。

目次は当然「表」を使うことが前提ですが。

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