CSSで一箇所分からない所がございましたので、ご教示いただける方がいらっしゃいましたら、よろしくお願いします。
【やりたいこと】
1. ページ内の特定の箇所(下記のソースでは「1」の文字)のリンクのみ文字色(aタグの「未訪問」、「訪問済み」、「訪問中」、「マウスがリンクに乗っている」をすべて同一にしたい)を変えたいと思います(他の大半のリンク色は特定の色が指定されています)。
【状況】
下記のソースをコピペしたhtmlをIE6で立ち上げ、「1」の文字をクリックすると「1」の文字が緑色に変わりました。
多分a:visitedが効いているのだと思います。
一方Firefox2で同じ動作をした所、「1」の文字色は赤色となります。
これはaタグ内のクラスの指定が優先されているのだと思います。
なおIE7はFirefox2と同様の動作となりました。
ちなみに私はこの部分を赤色にするつもりで記述しておりますので、Firefox2とIE7は意図したとおりの動作となり、IE6は意図していない動作となります。
こちらで検証した所、該当箇所のクラスをインラインスタイルシートで記述しなおせばIE6でも赤色で表示されたのですが、「デザインを一元管理したい」「変更箇所が多い」などの関係上、インラインスタイルシートではなく、クラスで記述したいと思います。
↓IE6では緑色(Firefox2, IE7では赤色)になります(NG)。
<a class="fontcolor" href="index.html">1</a>
↓IE6,Firefox2, IE7で赤色になります(OK)。
<a style="color:#FF0000" href="index.html">1</a>
【ソースコード(index.html)】
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>sample</title>
<style type="text/css">
<!--
.wrapper a {
color:blue;
}
.wrapper a:visited {
color:green;
}
.wrapper a:hover {
color:yellow;
}
.wrapper a.fontcolor {
color:red;
}
-->
</style>
</head>
<body>
<div class="wrapper">
<!-- 略 -->
<a class="fontcolor" href="index.html">1</a>
<a href="index.html">2</a></div>
<!-- 略 -->
</body>
</html>
なお<div class="wrapper">内には(省略しておりますが)多数のリンクがある関係上、下記の条件を満たしている方法をご存知の方がいらっしゃいましたら、ご教示いただければと思います。
1. wrapperのaタグのスタイルシートの記述はそのままでお願いします
(ここですべてのリンクの文字色を一括制御し、特定の箇所のリンク色のみ変えるという記述をしている関係上、ここを変更すると多数の記述を修正しないといけなくなると思う為です)。
2. インラインスタイルシートで記述すると、デザインを一元管理できなくなるなどの関係上、クラスで対応したい(一箇所の修正ですべてのページを反映させたい)とおもいます。
以上、よろしくお願いします。
No.1ベストアンサー
- 回答日時:
IE6で試してないんですが…、これでどうでしょう?
----------------------------------------------------
.wrapper a.fontcolor {
color:red;
}
----------------------------------------------------
↓
----------------------------------------------------
.wrapper a.fontcolor, .wrapper a.fontcolor:visited {
color:red;
}
----------------------------------------------------
ありがとうございます。
ご教示いただいたcssに変更した所、IE6,Firefox2で意図した動作をする事を確認いたしました。
IE7は今手元にないので確認できてないのですが、多分大丈夫だと思います。
どうもありがとうございました。
以上、よろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML 特殊文字の タブ:	...
-
文字が消える?
-
IE6でaタグのvisitedより、aタ...
-
1年無職の彼氏 別れるべきですか?
-
キャリアが袋小路に
-
きれいなVBプログラミング
-
API、OCX、DLLって何でしょう?
-
コンソールアプリでファイル選...
-
衛星管理者受験について
-
UNIX環境でのCプログラム上でC...
-
機械工学専攻の院卒でSEになる...
-
ランチャーの作り方について教...
-
6~7割の正解で、なぜ合格?
-
VBプログラムをEXCEL VBAに移植...
-
OSとCPUの関係について
-
仕事でExcelほとんど使わないん...
-
ホームページで画像を動かしたい
-
Ryzen 3700(無印)はWin11に対応...
-
.Net とは何ですか?
-
PICのI2C通信のプログラムについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTML 特殊文字の タブ:	...
-
個人HPにログイン機能付けられる?
-
VBで簡単なゲームをつくるサイト
-
ページ内のテキストをスクロー...
-
DWでのCSSの使い方について。
-
CSSでindex.htmlをクリックする...
-
textarea 内に IFRAME を読み込...
-
うっかり</body>と</html>を消...
-
一発太郎の一発ロボに登録した...
-
タグの左揃えと波型の違いで・
-
HTMLのタグは閉じなくてもいい...
-
embedタグでFirefox右クリック禁止
-
色定数 → Hex値の対応 (LightYe...
-
エラーメッセージ
-
METAタグのrefreshでサイト引越し
-
googlemapへのリンクを作りたい
-
ドリームウィバーを利用してス...
-
リファラ偽装について少し質問...
-
インラインフレームを使用した...
-
EUC文字体系のhtmlから、mailto...
おすすめ情報