- 締切済み
文字の色をスタイルシートで設定した時、ハイパーリンクの文字の色を変えたいのですが
スタイルシートの定義で質問です。 文字の色をスタイルシートで設定したとき、ハイパーリンクの文字の色を変えたいのですが やり方が分かりません。よろしくお願いします。 htmlは次の様に書いてます。 これだと、ハイパーリンク文字にマウスをおいても白文字のままです。 この時、赤色にかえたいのですが。 <head> <style type="text/css"> .style1 { color: #FFFFFF; font-size: small; } a:hover { color: red; text-decoration: none; } </style> </head> <body> <a href="xxxx.htm"> <span class="style1">ハイパーリンク文字</span></a> ・ ・ </body>
- m109103
- お礼率50% (1/2)
- HTML
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
リンクの色は、一般文字色と同じになる、背景と同色になる、などよほどの理由がない限り変えないほうが、アクセスビリティ(アクセシビリティ)の観点から避けた方がよい(サイトごとにリンクの色が違うと惑わす)のですが、あえて変更するなら単純にタイプセレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#type-selectors )を使います。 ★ページ内に<a name="ABC">などがある場合は、そこにも反応することを避けるため、リンクに関する疑似クラス ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#dynamic-pseudo-classes )を使うべきでしょう。 訪問済みなどは、 ★動的な疑似クラス ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#link-pseudo-classes )で設定します。 [CSS]タイプセレクタのみ <style type="text/css"> <!-- a{ color: white; font-size: small; } a:visited { color: magenta;} a:hover,a:focus{ color: yellow;} a:active { color: lime;} --> </style> [CSS]リンクセレクタを使って、<a name="">に適用しない。 <style type="text/css"> <!-- a:link{ color: white; font-size: small; } a:visited { color: magenta;} a:hover,a:focus{ color: yellow;} a:active { color: lime;} --> </style> <ul> <li><a href="#xxxx">ハイパーリンク文字</a></li> </ul> <p><a name="xxxx">ハイパーリンク文字</a></p>
- 藤田 朋郎（@hujitomo）
- ベストアンサー率54% (39/71)
何故 <span> を使うのでしょう？ <a> に直接クラス名を付ければすむのでは？ <style type="text/css"> <!-- a.style1 { color: #fff; font-size: small; } a.style1:hover { color: #f00; text-decoration: none; } --> </style> <a href="xxxx.htm" class="style1">ハイパーリンク文字</a>
関連するQ&A
- スタイルシート上でリンク文字色の設定
○スタイルシート iro { font-size: 18; } iro:link { text-decoration:none;color:赤; } iro:visited { text-decoration:none;color:青; } iro:hover { color:黄 } iro:active { text-decoration:none;color:緑; } ○本文 <p id="iro"> <a href="abc.html">リンク</a> </p> すごく基本的な質問です。 スタイルシート上でリンク文字の色を設定したいのですが、さっぱりわかりません。 上のコマンドではうまくいかないことは確認済みなんですが、一応書いてみました。 ちなみに赤、青といった色指定の部分は、簡単になるように「#～」ではなくああいう風に書いています。 めんどうでしたら、色指定の部分は空白でかまいません。 正しい書き方を教えてもらえないでしょうか。
- ベストアンサー
- HTML
- スタイルシートでツールチップ
初心者です。 http://ameblo.jp/linking/entry-10083271034.htmlから拝借して、ツールチップが出るような指定をしたいと思うのですが、できたらaタグを使わずにやりたいのですが、どうしたらよいでしょうか。 よろしくお願いいたします。 <html> <head> </head> <style> a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/ a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;} a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;} </style> <body> Easy <a href="#" class="tooltip">Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a>. </body> </html>
- ベストアンサー
- HTML
- スタイルシートのリンクについて
スタイルシートを下記の様に記述しました。 そこでリンクの部分なのですが ポインタが上にのった時にff6666になるようにしているのですが、 ff9900のままなのです。 通常はffcc00 既読はff9900 ポインタ上にのった時にff6666 クリックした時にff0000としたいのです。 どなたかお教え下さい。 <style type="text/css"> <!-- BODY { SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #ffcc00; SCROLLBAR-ARROW-COLOR: #ffcc00; SCROLLBAR-BASE-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR : #ffffff; SCROLLBAR-3DLIGHT-COLOR : #ffcc00} body,tr,td {font-size: 9pt;} body,tr,td {color: #ffcc00;} a {text-decoration: none;} a:link {color: #ffcc00;} a:hover {text-decoration: underline;} a:hover {color: #ff6666;} a:active {color: #ff0000;} a:visited {color: #ff9900;} body { background-repeat: no-repeat; background-position: 100% 100%; background-attachment: fixed;} --> </style>
- ベストアンサー
- CSS
- スタイルシート…
たぶん、初歩的な問題なんですが…自力では調べてもわからなかったので… スタイルシートで、画像を固定し、尚且つ、 リンクの貼ってある文字の上にカーソルがくると文字色が変わるようにしたいのですが、 どのようにすればよいのでしょうか？ 一応、 <style type="text/css"> <!-- body { background-image : url("画像のURL"); background-attachment: fixed; background-position: 100% 0%; background-repeat: no-repeat ; } a{text-decoration:none;} a:link {color:#色;} a:active {color:#色;} a:visited {color:#色;} a:hover {color:#色;} --> </style> じゃないかな…？と思って、試してみたのですが、画像は固定できてるんですが、 リンクの文字色は変わりませんでした…。 アドバイスお願いします！
- ベストアンサー
- HTML
- DreamWeaverMXでスタイルシートを使わない方法
DreamWeaverMXを使用しています。 文字に色をつけたり大きさを変えたりするときに、自動的にスタイルシートでタグが入力されてしまいます。 例えば赤文字にしたときに <font color="red">赤い文字</font> こうしたいのに <head> <style type="text/css"> <!-- .style1 {color: #FF0000} --> </style> </head> <body> <span class="style1">赤い文字</span> </body> こういうタグが入ってしまいます。 これをHTMLだけのタグがはいるようにしたいのですが、そういう設定方法はないでしょうか？ ご存知の方がいましたらよろしくお願いします。
- ベストアンサー
- グラフィックソフト
- 次のスタイルシートにおいて
<style type="text/css"> <!-- a:link { color:#333333;text-decoration:none; } a:visited { color:#333333;text-decoration:none; } a:active { color:#ff0000;text-decoration:none; } a:hover { color:#ff0000;text-decoration:none; } --> </style> a:linkなどがA:linkになっているものを見かけますがaを小文字で書くよりも大文字で書くほうが望ましいのでしょうか？ 特にxhtml1.1の観点から教えてください
- ベストアンサー
- Flash
- スタイルシートでリンク色を
現在、以下のようなスタイルシートを外部スタイル シートにして使っています。 H1 {COLOR: SILVER;} TD {COLOR: INDIGO;} TBODY {FONT-SIZE: 12px; LINE-HEIGHT: 18px;} A {COLOR: #INDIGO; TEXT-DECORATION: none;} A:hover {COLOR: DEEPPINK; TEXT-DECORATION: underline;} A:active {COLOR: DEEPPINK; TEXT-DECORATION: underline;} この場合で、H1タグを使用したテキストにリンクを 貼ると4行目のスタイルが優先されてしまい、テキス ト色がINDIGOに変更されてしまいます。H1タグのテ キストは、リンクの有無にかかわらず、SILVERにし たいのですがスタイルシートを書き換えることで対応 できますでしょうか。 このスタイルシートを使用したHTMLファイルが既に かなりのページ数になっていますので個別にHTMLファ イルをいじるのは避けたいのです。どなたか解決法を ご教示くださいませ。 よろしくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- SEO対策 スタイルシートは必須ですか？
スタイルシートの知識が無い者です 下記の様な記述だけでも、スタイルシートに外出し しないと、SEO上不利でしょうか？ <STYLE type="text/css"> A:link {COLOR: #404040; TEXT-DECORATION: underline} A:visited {COLOR: #404040; TEXT-DECORATION: underline} A:active {COLOR: silver} A:hover { COLOR: #404040; BACKGROUND-COLOR: gold} </STYLE>
- 締切済み
- HTML
- 外部スタイルシートについて・・・
外部スタイルシートを書きたいのですが、 まだ良くわかってない点があるので教えてくださると嬉しいんですが・・・（ＴＴ） 今はＨＴＭＬのヘッダ内に書いております。 <style TYPE="text/css"> </style> Ｑ１，上の部分は外部スタイルシートにすると、いらないのでしょうか？ Ｑ２，下の部分は外部スタイルシートにしてもスタイルシート内に、書く事ができますか？書くと不具合の原因になるのでしょうか？ <!-- //忘れてしまうので、ここにコメント書きたいです。 できれば、スタイルシートを表示できない？ブラウザの人へ配慮したいと思うので、 <!-- は、あった方が自分が忘れなくていいかと思うのですが・・・。 Ｑ３，ブラウザによって変になる、例えばとっても古いバージョンのネスケなどでも表示できるといいのですが 下記で問題あるのでしょうか？ もし良かったら下の内容をこうした方がいいという アドバイスがあると嬉しいです。 質問の仕方が良くないかもしれませんが教えて下さい（ＴＴ） <style TYPE="text/css"> <!-- //忘れてしまうので、ここにコメント書きたいです。 a:link {font-size: 11pt; text-decoration:none; color:#C7A17E;} a:visited {font-size: 11pt; text-decoration:none; color:#C7A17E;} a:active {font-size: 11pt; text-decoration:none; color:#C7A17E;} a:hover {font-size: 11pt; text-decoration:underline; color:#FF9966;} td {font-size: 11pt;} span {font-size: 11pt;} BODY {font-size: 11pt; } LI {font-size: 11pt;} --> </style>
- ベストアンサー
- HTML
- スタイルシートで。。
こんにちは。 外部CSSをリンクさせてCSSを反映させています。 そこで質問です。 リンク箇所には下線がでるようにしていますが、リンクのある画像にまで下線がついてしまうのです。 画像だけには適用させない、というようなタグはありますか？ ちなみにこういうのを記述してます a:link{color:#cccccc;text-decoration:none;border-bottom: #ffffff 1px dashed;} a:visited{color:#cccccc;text-decoration:none;border-bottom: #ffffff 1px dashed;} a:active{color:#cccccc;text-decoration:none;border-bottom : #ffffff 1px dashed;} a:hover{color:#cccccc ;text-decoration:none;background-color : #688999; border-bottom : #ffffff 1px dashed;} なにか回避方はありませんでしょうか？ 教えてください、よろしくお願いいたします。
- ベストアンサー
- HTML
お礼
hujitomoさん、ありがとうございます。 できました。 スタイルシートの使い方が、よくわからないので、 少しずつ、勉強していきます。