ホームページビルダー・グレート初心者講座

グレート初心者講座トップへグレート初心者講座 小技集へグレート初心者講座≠ヨグレート初心者講座 質問掲示板へ

HTML版 過去ログ
| 掲示板を見る | ホームに戻る | ワード検索 | 過去ログ |   

オンマウスで文字色・枠内色の変更

日時: 2007/11/05 17:05
識別: IDr1qY9P3qDPY
名前: やす
参照: https://101064.gozaru.jp/

この様な質問は、過去にもあると思います。しかし、過去の質問を捜して
みても、うまく出来なかったので質問させて下さい。

マウスがリンク上にある時、色を反転させたいのです。

そこで質問なのですが、通常時は「枠内の色を赤に」、「リンク文字色を白に」
しして、オンマウス時に、「枠内の色を白に」「リンク文字色を赤に」反転した
いと考えてます。

ページ全体でなくて、リンクを貼った際にその部分の色だけを反転させたいのですが・・・。 色々調べはしたのですが、中々出来なくて・・・。
初心者ですが、誰か教えて戴けますか?お願いします。

説明が下手で申し訳ないですが・・・。
参考に、同じ様な事をしているサイトさんをみつけたので、許可を戴いたうえでHPを掲載させていただきます。
「掲示板」「チーム紹介」とかいてるような感じにしたいのです。


宜しくお願いします。

Re: オンマウスで文字色・枠内色の変更 ( No.1 )
日時: 2007/11/05 17:52
名前: Newのり太

参考ページのは、JavaScript(とスタイルシート)を使ってるようですが、
スタイルシートのみでもう少しシンプルに出来ますよ。

https://www6.plala.or.jp/go_west/nextcss/tip/tech/sidemenu.htm
https://www.shoshinsha.com/hp/template/menu/00.htm
文字色、背景色などはお好みで。

テーブルレイアウトならこちらがわかりやすいかも。
https://allabout.co.jp/internet/hpcreate/closeup/CU20020709A/
Re: オンマウスで文字色・枠内色の変更 ( No.2 )
日時: 2007/11/05 19:36
名前: やす
参照: https://101064.gozaru.jp/

ありがとうございます!!!

最後に教えて頂いたサイトで挑戦してるのですが、リンクの文字色が青から
変えられないのですが・・・。
クリックした後も、リンク色を変えずに、常に「枠内の色を赤」「文字を白」との
反転だけにしようと思えば、どうしたらよいのでしょう??

ページ全体ではなく、この部分だけの設定のやり方を教えて戴ければと思います。
Re: オンマウスで文字色・枠内色の変更 ( No.3 )
日時: 2007/11/06 10:05
名前: Newのり太

> 最後に教えて頂いたサイトで挑戦してるのですが、リンクの文字色が青から
> 変えられないのですが・・・。
> クリックした後も、リンク色を変えずに、常に「枠内の色を赤」「文字を白」との
> 反転だけにしようと思えば、どうしたらよいのでしょう??

>> 文字色、背景色などはお好みで。

a.widelink { display: block; width: 100%; text-decoration: none; }
サンプルでは、文字の色や背景色は設定されていません。
ですので、↑に、お好みのスタイル(color: white; background-color: red; ですか)
を加えればよいかと。
# サンプルでは、「枠内の色」は、表のセルの属性で背景色を設定しちゃってます。
# せっかくスタイルシートを使ってるのになんだかな〜。って気がしないでもない。

>>> マウスがリンク上にある時、色を反転させたいのです。

a.widelink:hover { background-color: #ffff99; color: red; }
↑これがクラスwidelinkの「マウスがリンク上にある時」のスタイルです。
反転なら、color: red; background-color: white; ですね。


> ページ全体ではなく、この部分だけの設定のやり方を教えて戴ければと思います。

いや、ですから、そのようなサンプルを提示しています。
提示したサンプルでは、すべて(ページ全体ではなく)特定の箇所にのみ
スタイルを与えています。
上記サンプルも、クラスが"widelink"であるリンクのみにスタイルが適用されます。
その他のリンク部分は、特にスタイルを与えない限り、
ブラウザデフォルトのスタイルになります。


ホームページビルダーでのやり方は下記などが参考になるかと。
https://www.wsb.jp/hpb/css/link.htm#05
ただし、理屈がわかっていないとかえってややこしいかもしれません。
逆に、(HTMLと)スタイルシートの基本的なことがマスター出来れば
いろいろ応用が利くようになると思います。

https://www.kanzaki.com/docs/htminfo.html
# 適当な解説ページを捜せなかったんでド定番をはってみる。

ホームページビルダー・グレート初心者講座 Copyright © 2002-2005 aimix All Rights Reserved