人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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


●質問者: mm4m
●カテゴリ:ウェブ制作
✍キーワード:Active HTML LINK 「A」 ダメ
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● gessan
●27ポイント

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

◎質問者からの返答

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

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

なぜだろう。。。。


2 ● wizemperor
●27ポイント

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


<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/

ダミー

◎質問者からの返答

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

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

なぜだろう。。。。


3 ● atugari
●26ポイント

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

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

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

◎質問者からの返答

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

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


4 ● kaiton
●10ポイント

#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/ はダミー


5 ● kn1967
●10ポイント

>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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ