- ベストアンサー
css 上から色を重ねるのはよくない？
CSSで a{ color:gray;} a:visited { color:red; } こうしてるのですが、 理由としては まずすべてのリンクに灰色を付けて、 その後、訪問済みのリンクを赤にしてます。 でもそうすると、 グーグルクロームでソースを見た際に 画像の様になります。 訪問済みのリンクは まず最初に灰色にして、上から赤を重ねていますが こういうやり方はよいのでしょうか？ 訪問済みのリンクに色を付けるのなら まずすべてのリンクに色を付けるのではなく 訪問前のリンクに色を付け、 訪問済みのリンクに色を付けたほうが良いのですか？
- TIIYENVOFUW
- お礼率57% (51/88)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
別に問題ないですが、 a:link{color : gray}; a:visited{color : red}; a:hover{～ほにゃららら～}; a:active{～ほにゃららら～}; のように書けば『スッキリ！』となるのではないでしょうか。
関連するQ&A
- クラスを指定して訪問前のリンクに色を付けるには？
a.a_Link{ color: red; } これで、class="a_Link"と指定したリンクは赤になりますが 訪問後も赤のままです。 なので訪問前のみ赤にしたいのですが やり方がわかりません。 http://www.tagindex.com/stylesheet/link/color.html によると a:visited { color: #000080; } … 訪問済みのリンク が訪問済みのリンクのようなので、 visited を使えばいいと思うのですが、 a_Linkとvisitedをどう組み合わせればいいのでしょうか？
- ベストアンサー
- HTML
- css 文字の色
cssでサイト全体を a:link{color:#33CCFF;} a:visited{color:#33CCFF;} a:hover{color:#FFCCFF;} a:active{color:#FFCCFF;} と先に色の指定していて、後からある一ページの一文の色（リンク指定されているもの）を別の色に変えたいのですが、色々やってもうまく色がつきません。 どうすればその一文（リンク指定されているもの）のみの色変更が可能になるのでしょうか？
- 締切済み
- その他([技術者向] コンピューター)
- css リンクの色が全部変わってしまう。
１、 css div#link a:link{#ff0000;} div#link a:visited{#999999;} と設定したリンクの行があるとします。 ひとつのリンクをクリックすると、全ての並んでいる、リンクがvisitedの色に変わってしまいます。 原因と直し方を教えてください。 ２、 また、firefox（IEもかもしれない）では一度visitedの色になるとブラウザを再起動しても、いつまでもvisitedの色のままです。 これは正常な動作なのでしょうか。 異常である場合の直し方を教えてください。 正常である場合、むやみにlink色とvisited色は違う色にしない方がよろしいということでしょうか。 回答お願いします。
- ベストアンサー
- CSS
- CSSによるリンク設定
いつもお世話になっております。こんばんは。 テキストに対してCSSリンクの設定を行う場合、a;link または a;visited で未訪問及び訪問済みの色の設定が可能ですが、 ページ内のすべてのテキストリンクに対して、同じ色が適応されてしまいます。各テキスト単位でリンクの色を設定するには、どのようにしたらいいでしょうか。わかる方がいらっしゃったら御教授ください。 よろしくお願いいたします。
- ベストアンサー
- HTML
- スタイルシート（CSS）の外部リンク方式を使用したテキストリンクの色変更
お手数ですが、webページ作成に詳しい方は回答お願いします。 webページを作成しております。 スタイルシート（CSS）を外部リンク式でhtml文書に適用して、テキストリンクの色を変更しようとしています。 未訪問リンクは青色、訪問済みリンクはグレー、マウスオーバーリンクは赤色が希望ですが、うまくいきません。 未訪問、訪問済み、マウスオーバー時に関わらず常に赤色です。 ちなみに内部埋め込み式ではうまくいきました。 以下html及びスタイルシート詳細です。 （外部リンク式html） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <a name="jump"></a> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <LINK rel="stylesheet" href="css/body.css" type="text/css"> <SCRIPT type="text/javascript" src="css/default_css.js"></SCRIPT> <TITLE></TITLE> </style> </HEAD> ～抜粋～ <TABLE width="740" border="0" cellspacing="0" cellpadding="0"> <TR> <TD height="40" align="center" bgcolor="#504040" class="t0"> <div id="footer"> <br /> <a href="home.html">HOME</a> |<a href="sitemap.html">サイトマップ</a> <br /> </div> （外部リンク式スタイルシート） a:link {color:blue;} a:visited {color:gray;} a:hover {color:red;} body{ color:#666666;} #main { line-height: 150%;} （埋め込み式html） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <a name="jump"></a> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- a:link {color:blue;} a:visited {color:gray;} a:hover {color:red;} body{ color:#666666;} #main { line-height: 150%;} #footer { color:#ffffff; font-size: 100%;} --> <SCRIPT type="text/javascript" src="css/default_css.js"></SCRIPT> <TITLE></TITLE> </style> ～抜粋～ <TABLE width="740" border="0" cellspacing="0" cellpadding="0"> <TR> <TD height="40" align="center" bgcolor="#504040" class="t0"> <div id="footer"> <br /> <a href="home.html">HOME</a> <a href="sitemap.html">サイトマップ</a> <br /> </div> </TD> </TR> </TABLE></TD> よろしくお願いします。
- 締切済み
- HTML
- CSSの添削をお願いします。リンク色が反映しません
閲覧ありがとうございます。下記CSSの 「.CLASS li a:link,a:visited{ color:red; text-decoration:none;」 の部分が反映されず、ブラウザの標準設定のままになってしまいます。 本来のstyleの全文はbodyや他のクラスの記述もしているのですが、それらが影響しているわけではないことを確認してあります。 <style> .CLASS ul{ padding:0; } .CLASS li{ border-top: solid pink 1px; list-style-type: none; } .CLASS li a:link,a:visited{ color:red; text-decoration:none; background-color:lightgray; display: block; } .CLASS li a:hover { background-color:gray; } </style> <div class="CLASS"> <ul> <li> <a href=""> 反映されてない…リンク文字色red、デコレーションnone</a> </li> <li> <a href="">反映されてる…リンク背景色lightgray、ホバー背景色gray</a> </li> </ul> </div> 宜しくお願いします
- 締切済み
- CSS
- CSS：リンクにカーソルを合わせたときに文字の色が変わらない
CSSでリンクする文字をカーソルが上に乗ったとき、文字の色を赤、下線を無くすようにしようと思ったのですが、下線部は消えるのですが文字が赤くなりません。 これを解決する方法はないでしょうか？ a:hover {color: red; text-decoration: none} 回答よろしくお願いします。
- ベストアンサー
- HTML
- CSSについて
カーソルがルンク先文字にふれた時に色が変わり、 リンクしたあとリンク済みになるCSS( スタイルシート)はこれでいいでしょうか？ リンク済みの色が変わりません。 <!-- <style type="text/css"> --><!--A:HOVER{position : relative;top:2px; left:2px;} </style> --> <style type="text/css"> <!--A:link {color:#000055; text-decoration:none; } A:visited {color:#000055; text-decoration:none; } A:hover {color:#ff3300; text-decoration:underline; }--></style>
- ベストアンサー
- HTML
- CSSの優先順位
CSSを一部適用しない部分を設定したいのですが方法が分かりません。 もしかすると、私のやりたいことはCSSの順位付けかもしれません。 ▼基本▼ a:link {color:赤;text-decoration:none;} a:visited {color:青;text-decoration:none;} a:hover {color:黄;text-decoration:none;} a:active {color:緑;text-decoration:none;} ▲基本▲ 一方、下記のテキストには上記CSSの効果はいらないです。ここのテキストはリンクを貼っても文字の色（基本色：黒）を変化させず、下線もつけたくありません。 <td style="border:1px solid gray;" onmouseover="this.style.backgroundColor=紫" onmouseout="this.style.backgroundColor=白">ホーム</td> 「基本」を記述をすると、もちろんリンクをつけたすべてのテキストに適用されてしまいます。 しかし「基本」を一部適用したくない場所に不適用とすると下線とかも勝手につきますよね。 2番目に優先させるものとして↓を記述すべきですか？ a:link {color:黒;text-decoration:none;} a:visited {color:黒;text-decoration:none;} a:hover {color:黒;text-decoration:none;} a:active {color:黒;text-decoration:none;} そもそも優先順位のつけかたが分からないのですが…。 色々考えましたが、何をすべきか分かりません。よろしくお願いします。
- 締切済み
- その他（インターネット・Webサービス）
- CSSでのリンク色の変更で
HPのリンク色(a:link)の色をa:link{color:#ffffff;}(色は例です)で変えたんですが、 何故か色が反映されず、デフォルトの青色で表示されてしまいます。 ・hover、active、visitedも同じように変更しているが、そっちは反映されている ・リンクの色を変えようとするページにcss(仮にAとB)ファイルを２つ使っている ・Aではリンクに関する設定は記述してない。またAを省いても変わらない ・Bのリンク以外の指定を消しても同じ ・そもそも青色で設定している文字がない ・HTML文にも色変えの記述はない ・ブラウザ指定もしていない 何度自分で見直しても全く分からないのでお願いします
- ベストアンサー
- HTML
お礼
ありがとうございました。