一つのhtmlファイルの中で二つ以上リンクの文字の色指定はできるか知りたいです。

フレームを使わないでリンクする文字の色を個別でlink、hover、visited、activeとそれぞれ指定できるか?
たとえば「A」は赤文字でリンク(ロールオーバーの設定も含)、「B」は緑でリンク(ロールオーバーの設定も含)させるという感じ。
ちなみに、このリンクの色を変えたいtableに、個別でlink、hover、visited、activeの設定をした<div>で囲んだんですが、ダメでした。。。
どなたかご教授お願いします。

回答の条件
  • URL必須
  • 1人3回まで
  • 登録:2007/01/26 14:07:39
  • 終了:2007/01/29 10:19:49

回答(5件)

id:gessan No.1

gessan回答回数154ベストアンサー獲得回数12007/01/26 14:26:25

ポイント27pt

idやclassを使って分ける。

スタイルで

div#id a

又は

a.class


HTMLで

<div id="id">

<a href="#">#</a>

</div>


<a href="#" class="class">#</a>


http://iswebmag.hp.infoseek.co.jp/sample209.html

id:mm4m

回答ありがとうございます。

IEでは問題なかったんですが、firefoxではうまくいきませんでした。。。

なぜだろう。。。。

2007/01/26 15:29:51
id:wizemperor No.2

wizemperor回答回数379ベストアンサー獲得回数522007/01/26 14:30:19

ポイント27pt

ソースの提示がないので、以下のようなソースを例に書きます。


<table class="TableA">

<tr>

<td><a href="~"></a></td>

</tr>

</table>


<table class="TableB">

<tr>

<td><a href="~"></a></td>

</tr>

</table>


1.tableの開始タグ内に「class="クラス名"」の記述を追加。

2.<head>~</head>内に以下のスタイルシートの記述を追加。


<style type="text/css">

.TableA a:link { color: red; }

.TableA a:visited { color: red; }

.TableA a:hover { color: red; }

.TableA a:active { color: red; }


.TableB a:link { color: green; }

.TableB a:visited { color: green; }

.TableB a:hover { color: green; }

.TableB a:active { color: green; }

</style>


※「link」、「visited」、「hover」、「active」はこの順番で書く必要があります。


これでいけるんではないかと思います。




http://q.hatena.ne.jp/

ダミー

id:mm4m

回答ありがとうございます。

IEでは問題なかったんですが、firefoxではうまくいきませんでした。。。

なぜだろう。。。。

2007/01/26 15:28:57
id:atugari No.3

atugari回答回数56ベストアンサー獲得回数02007/01/26 14:54:25

ポイント26pt

CSSで、各タグにクラス、idを指定すれば可能です。

慣れるまで、初心者は難しいと思いますが、がんばって下さい。

http://hp.vector.co.jp/authors/VA013937/cssref/

id:mm4m

回答ありがとうございます。

じっくり読んでみます。。。。

2007/01/26 17:01:30
id:kaiton No.4

kaiton回答回数260ベストアンサー獲得回数342007/01/26 18:34:15

ポイント10pt

#1の方と同じような回答になりますが、FireFoxでも次のような設定でいけています。

DIVでかこまずに、AタグにCLASS指定しています。

これでダメなら、実際のソースをだした方が良さそうですが..(可能ならサイトのURLを)

CSS部分

A{text-decoration : none;}
A:LINK{color : #9999ff;}
A:VISITED{color : #99ffff;}
A:HOVER{color : #ffffff; background-color : #000033;}

A.aaa{text-decoration : none;}
A.aaa:LINK{color : #99ff99;}
A.aaa:VISITED{color : #ff9999;}
A.aaa:HOVER{color : #000033; background-color : #ffffff;}

HTML部分

<A href="...">ホゲ1</A>
......
<A href="..." class="aaa">ホゲ2</A>

http://q.hatena.ne.jp/ はダミー

id:kn1967 No.5

kn1967回答回数2915ベストアンサー獲得回数3012007/01/26 23:05:10

ポイント10pt

>firefoxではうまくいきませんでした


具体的にどのような結果になったのかを書き込んでいただかないと、

症状を想像できませんから、どのような対応をしてよいやら判らなかったりします。

技術的な質問の際には、ご自身の言葉で結構ですから、

より詳しく症状を説明するようにしてみてください。

『サーバーはどこ? それともパソコン上での話?』

『使っているOSとブラウザの名称とバージョンは?』

『どのようなコードを書いたの?』

『どのような症状になったの?』

などなど、、、


現状で推測できる範囲ですがFireFox2.0.0.1 でwizemperorさんのコードは正常に動きましたから、MIMEタイプあたりではないかと思いますので、次のようにmeta情報でcssを宣言してみてください。

<html>
<head>
  <meta http-equiv="content-style-type" content="text/css">
  <style type="text/css">
    .TableA a:link { color: red; }
    .TableA a:visited { color: red; }
    .TableA a:hover { color: red; }
    .TableA a:active { color: red; }
    .TableB a:link { color: green; }
    .TableB a:visited { color: green; }
    .TableB a:hover { color: green; }
    .TableB a:active { color: green; }
  </style>
</head>
<body>
  <table class="TableA">
    <tr><td><a href="~">red</a></td></tr>
  </table>
  <table class="TableB">
    <tr><td><a href="~">green</a></td></tr>
  </table>
</body>
</html>

MIMEはサーバが自動的にヘッダー情報として返すようになっているのですが、その対応状況はサーバによって異なりますので、上記のように明示しておくのが無難です。

http://www.tohoho-web.com/wwwxx015.htm

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません