id:cotoha
ポイントあり80pt回答受付終了
コンピュータ学習・教育

リンク色の一部変更の仕方について質問です。

リンク色を一つずつ変えるのではなく、テーブルごとに「このテーブルの中のリンク色はこれ」とまとめて変える方法を教えてください。
（全体のリンク色を変えるのではなく、一部のテーブルに限って変更する方法です。）
■リンク色　■訪問後のリンク色　■オンマウス時のリンク色
の３つをお願いします。
初歩的な質問で申し訳ありませんが、よろしくお願い致します。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録：
  • 終了：--
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答（5件）

id:whiteclover No.1

回答回数2ベストアンサー獲得回数0

ポイント15pt

http://www.tohoho-web.com/css/index.htm

とほほのスタイルシート入門

スタイルシートを使うことを前提に説明いたします。

スタイルシートにおいてはリンクカラーの設定は


a:link { color: #666666 ; } /* 通常時 */

a:visited { color: #000000 ; } /* 訪問済 */

a:active { color; #CCCCCC ; } /* クリック時 */

a:hover { color: #CCCCCC ; } /* オンマウス時 */

のように記述します。

（色の組み合わせは一例でしかありません）

http://www.tohoho-web.com/css/basic.htm#ContextualSelectors

とほほのスタイルシート入門（基礎知識）

さて、参照URLのように、CSSには状況依存セレクタというものがあります。

これはCSSを定義することにより、

ある条件下でのみ効力を発揮する指定を行えるものです。


ですから、ご質問のように

テーブルごとにリンクの色を変えられる際には、

テーブルにクラス指定（例えばクラス名classname）をし、

table.classname a:link { color: #666666 ; }

などとすれば、色が変えられるかと思います。

id:cotoha

ちょっと難しそうですが、なんとなく分かりました。

ありがとうございます。

2005/08/06 13:44:23
id:sparituda No.2

回答回数57ベストアンサー獲得回数0

ポイント15pt

http://www.tagindex.com/stylesheet/link/link_color.html

スタイルシート［CSS］/リンク/リンク文字の色を指定する - TAG index

スタイルシートを使って定義します。

このURLの説明だと、スタイルシートの対象ページの全てのリンクに影響してしまいますが、A要素に対するクラスを定義し、そのクラスに対して、:hoverなど疑似クラスを定義すれば、特定のクラスのリンクにまとめて効果があります。


例)class=”mytable”のリンクだけ、色を変える。

CSS定義：

<style type=”text/css”>

<!--

A.mytable { text-decoration : underline }

A.mytable:link { color : green; }

A.mytable:hover { color : red; }

A.mytable:active { color : gold; }

A.mytable:visited { color : gray; }

-->

</style>


HTML：

...

<a class=”mytable” href=”page1.html”>Link1</a>

<a class=”mytable” href=”page2.html”>Link2</a>

<a href=”page3.html”>Link3</a>

...


テーブルにクラスを指定して、その中のリンク全てを対象とするのは、多分、無理。(ブラウザによっては、そうなるかも)。同じ色にしたいリンク全てに、class=を付けて下さい。

http://www2j.biglobe.ne.jp/~apollo/css/style10.html

>CSS-�����N��8�F�ɕω�������

こちらも、参考になるかも。

id:cotoha

リンクを個別に色を変える方法はしっていたのですが、テーブル全体となるとブラウザによっては無理な物があるのですね。

ありがとうございました。

2005/08/06 13:45:46
id:mukunokiy0725 No.3

回答回数19ベストアンサー獲得回数0

ポイント15pt

http://www.openspc2.org/reibun/css/

スタイルシート例文辞典

スタイルシートで、

> ■リンク色　■訪問後のリンク色　■オンマウス時のリンク色

ごとの設定をaタグに対して施しておき、<a href=”http://www.～” class=”設定パターン名”>リンク文字</a>、というような切り方をするのがよいのではないでしょうか。

id:cotoha

リンク色を個別に変更する方法は知ってました。

けれどひとつずつ指定すると、その分重くなりそうなのでまとめて色を変更したかったのですが・・・。

やっぱり難しいようですね。

ありがとうございました。

2005/08/06 13:47:33
id:Penpen No.4

回答回数43ベストアンサー獲得回数0

ポイント15pt

http://www.lucky-bag.com/archives/2005/07/selectors.html

Lucky bag::blog: 視覚的に分かりやすい CSS セレクタの手引き

子孫セレクタを使えば、テーブルごとにリンクの色を設定できます。

（特定の要素の子要素を指定することができます。）


例）

【CSS】

table.red a {color: red;}

table.green a {color: green;}


【HTML】

<table class=”red”>

　　<tr>

　　　　<td><a href=”http://hoge.co.jp”>赤いリンク</a></td>

　　</tr>

</table>

<table class=”green”>

　　<tr>

　　　　<td><a href=”http://hoge.co.jp”>青いリンク</a></td>

　　</tr>

</table>


リンクの状態別の設定は#2の方の説明のとおりです。

頑張ってください＾＾

id:cotoha

分かりやすく説明して頂き、ありがとうございます。

これなら私にもできそうです。＾＾

2005/08/06 17:29:45
id:quintia No.5

回答回数562ベストアンサー獲得回数71

ポイント20pt

http://www.tohoho-web.com/css/basic.htm#Class

とほほのスタイルシート入門（基礎知識）

URLは他の回答と重なりますがご容赦を。


1.の回答にある状況依存セレクタを使って以下の様に書きます。


<html>

<head>

<title>無題ドキュメント</title>

<meta http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”>

<style type=”text/css”>

<!--

.mytable1 a:link { color : #0000FF; }

.mytable1 a:visited { color : #000077; }

.mytable1 a:hover { color: #FFFFFF; background-color: #FF0000; }


.mytable2 a:link { color : #00FF00; }

.mytable2 a:visited { color : #007700; }

.mytable2 a:hover { color: #FFFFFF; background-color: #0000FF; }


.mytable3 a:link { color : #FF0000; }

.mytable3 a:visited { color : #770000; }

.mytable3 a:hover { color: #FFFFFF; background-color: #00FF00; }

-->

</style>

</head>


<body bgcolor=”#FFFFFF” text=”#000000”>

<table width=”95%” border=”1” cellspacing=”0” cellpadding=”0” class=”mytable1”>

<tr>

<td width=”50%”><a href=”http://www.hatena.ne.jp/”>http://www.hatena.ne.jp/</a></td>

<td width=”50%”><a href=”http://r.hatena.ne.jp/”>http://r.hatena.ne.jp/</a></td>

</tr>

</table>

<p>　</p>

<table width=”95%” border=”1” cellspacing=”0” cellpadding=”0” class=”mytable2”>

<tr>

<td width=”50%”><a href=”http://d.hatena.ne.jp/”>http://d.hatena.ne.jp/</a></td>

<td width=”50%”><a href=”http://www.hatena.ne.jp/”>http://www.hatena.ne.jp/</a></td>

</tr>

</table>

<p>　</p>

<table width=”95%” border=”1” cellspacing=”0” cellpadding=”0” class=”mytable3”>

<tr>

<td width=”50%”><a href=”http://r.hatena.ne.jp/”>http://r.hatena.ne.jp/</a></td>

<td width=”50%”><a href=”http://d.hatena.ne.jp/”>http://d.hatena.ne.jp/</a></td>

</tr>

</table>

<p>　</p>

</body>

</html>


ダブルクォートを半角化する必要がありますがコピペしてお試しあれ。

こんな書き方です。


.mytable1 a:link {}

という様にクラス指定に状況依存セレクタでA要素の定義済みクラスそれぞれをCSSを記述して、

<table class=”mytable1”>

としてtable要素にクラス指定するのがポイントです。

id:cotoha

どこに何を入れたらいいのか、よくわからなかったのですが、これなら一目瞭然で分かりやすかったです。

どうもありがとうございました！！

2005/08/06 17:32:05

コメント（2件)

  • id:sparituda
    sparituda 2005/08/07 12:21:32
    CSS深淵なり

    今回は、他の方の回答が、私自身の勉強になりました。
    スタイルシートの継承については、ブラウザによって異なる結果が出る事が多かったので、「多分、無理」となげやりな回答してしまいましたが、子孫セレクタや子供セレクタ(＝状況依存セレクタ？)を使えば、上手く行く様ですね。
    MacOS10.3のSafari、FireFox、Netscape7.1、IE5.2、WindowsのIE5.5と6.0のいずれもOKでした。(Operaはインストールしてないので未確認)
    子孫セレクタの解説は、基本セレクタ(TABLEとかAとかのタグ名)を使ったものばかりで、使い道がよくわからなかったのですが、これでスッキリしました。
    なお、子孫側のセレクタとしてCLASSセレクタを使えば、「特定のTABLE内にある特定のCLASSのリンクだけ色を変える」という指定も可能です。
    例).mytable A.mylink:hover {... }
    と言うか、そうしないとスタイルシートの定義の順番に依存してしまって、難しい事になります。結局、属性を意識して指定したいタグには、個々にclass=を記述しないと、確実ではないという事でしょうか。
    http://www.hatena.ne.jp/1123284420
  • id:Penpen
    Penpen 2005/08/08 15:22:10
    ひとりごと

    細かいことかもしれませんが、青いリンクじゃなくて緑のリンクでした…。

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

トラックバック

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

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

回答リクエストを送信したユーザーはいません
ユーザー登録をして使いはじめる!無料
すでに登録されている方はこちらからログイン
この質問に含まれるキーワード
知りたいことを検索してみよう
▲ページトップへ