- ベストアンサー
CSSでのリンク指定について
- CSSでのリンク指定について
- a:link, a:visited, a:hover, a:activeの指定方法について解説します。
- また、特定のブラウザで表示が崩れる場合の対処法についても触れます。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- リンク画像のマウスオーバー時の下線を消したい。（a:hover 関連。
テキストリンクについては、マウスオーバー時に下線が表示されても良いのですが、画像リンクについては下線を表示させたくないと考えています。 どうやったら、切り分けられますでしょうか。 現在、cssファイル内にて、 ---------------- a:hover { color: #色; border-bottom: 1px solid #色; } ----------------- と書いてあり、これがテキストリンクにも画像リンクにも影響しています。 ------------------- 【CSS】 img{ border:0; } -------------------- ではダメでした。 ------------------------- 【HTML】 <a href="リンク先" class="img"><img src="画像URL"></a> 【CSS】 .img a:hover { border-bottom:0px; } ------------------------- →これでもダメでした。 どなたかご助言よろしくお願いします。
- ベストアンサー
- HTML
- CSSでリンクパターンを2つにする
CSSでリンクの色のパターンを2つに変えたい場合、head内にどう記述すればよいのでしょうか。 具体的には、 ========================== リンク1・リンク2・リンク3 ここにはコメントをいれます。 リンク4・リンク5・リンク6 ========================== 上記ように表示させ、 link.visited.active.hover.focusを上のリンクと下のリンクで変えたいんです。 大変困っています。 至急ご回答頂けるとありがたいです。
- ベストアンサー
- HTML
- cssによる画像リンク枠の色変更
CSSでリンクが貼られた画像の４隅のボーダーに色を付け、 オンマウスで４隅のボーダー色が変わる方法ってどうやってやるのでしょうか？ 一番簡単なＣＳＳを教えて下さい。 ちなみに、下記でやってみましたが、よくわかりません。 <style type="text/css"> <!-- IMG a{ border-width : 7px 7px 7px 7px;border-style : solid solid solid solid;border-color : fuchsia fuchsia fuchsia fuchsia; } --> </style> </head> <body> <a href="#"><img src="jpg" width="54" height="72" border="0"></a>
- 締切済み
- HTML
- firefoxではcssで画像をプリロードができません
リンクの貼られた画像に触れると画像が変化させようと 以下のコードを使ってみました。 IE、Operaではできたのですがfirefoxではもともと表示されてるはずの画像も触れたときに表示される画像も表示されません。 何かやり方があるのでしょうか？ ■html <p class="xxx"><a href="#">sample</a></p> ■css p.xxx{ background:url("img01/a_img.gif") no-repeat; } p.xxx a{ display:block; width:200px; height:50px; background:url("img01/b_img.gif"); text-indent:-9999px; } p.xxx a:hover{ background:none; }
- ベストアンサー
- CSS
- 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
- IEでCSSのアンカー色指定が反映しない
<style type="text/css"> a:visited { color:blue;} div.testB { padding-left:12px; clear:both; } div.testB a{ color:#000000; text-decoration:none; font-weight:bold; } div.testB a:hover{ color: #cc0000; font-weight:bold; text-decoration:underline; } </style> <div class="testB"> <div><a href="#">リンク</a></div> </div> このようなソースで、FireFoxでは理想どおり表示されるのですが、IEではtestBで指定したリンク色が反映されず、先のa:visited{}のカラーでボールドだけ効いた状態になってしまいます。hoverしても色は変わらずです。visitedの指定がなければ、きちんと反映されるようなのですが… 解決策ありますでしょうか。 よろしくおねがいします。
- ベストアンサー
- CSS
- css 画像の一部分をリンクにしたいです
画像の一部分だけをリンクにしたいです。 margin と width と height で指定したエリアをマウスオーバーすると、指定した部分だけ画像が変わってリンクになるという動作をさせたいのですが、うまくいきません。 最悪、画像が変わらなくても指定した部分のリンクができれば良いのですが画像全体がリンクになっているため、全体画像の上でマウスを動かしていると、リンク時のマウスカーソルになったり通常時のマウスカーソルになったりを繰り返しています。 html と css は以下のような記述をしています。 <html> <head> <style type="text/css"> div#menu a:hover { display:block; background-image:url(img/headerimg02.jpg); background-repeat:no-repeat; margin: 50px 468px 250px 50px; width:200px; height:100px; text-align:center; text-indent: -2000px; overflow: hidden; } </style> </head> <body> <div id="menu"> <a href="hoge.html"><img src="img/headerimg01.jpg" width="718" height="400"></a> </div> </body> </html>
- ベストアンサー
- CSS
- CSSでvisitedを指定した時の記述について
こんにちは。 左にコンテンツ、右にインラインフレームを設定しています。 左のコンテンツが増え、長くなったので、途中からコンテンツのリンクをクリックしたら最上部にいけるようにと、リンク先に<a name="top">を設定しコンテンツに<a href="xxx.html"#top class="flink" target="ifre">xxx</a>と設定しました。 また、CSSでは a.flink{ text-decoration:none; } a:visited.flink{ color:#ff00ff; } a:link.flink{ color:#ffcccc; } a:hover.flink{ color:#999999; } のように設定しています。 この#topを追加したコンテンツのみ、クリックした後はvisitedの色になるにも関わらず、一度IEを閉じるとvisitedの設定が生かされず、もともとのリンク色に戻ってしまいます。 hoverもきちんと変化するので、記述をミスしているわけではないようですが、#topをはずすと、IEを再起動してもvisitedの色が生きています。 #topの設定を残したまま、きちんとvititedの色に変わるようにする方法はありますでしょうか？ よろしくお願いします。
- 締切済み
- HTML
- ＣＳＳファイルの＃とか：とか．とかについて
ホームページの作成について勉強しているのですが、 外部ＣＳＳファイルを見ると、 例えば、 a.noborder:visited { とか img#logo1 { とか a:hover img.hoverimg { いろいろ書き方があり、え？これはどういう意味なんだろうか、と悩み中です。 どれが正しいというわけではないんだろうと思いますが、 ＣＳＳを書く際に、どれが一番適していますか？
- ベストアンサー
- ホームページ作成ソフト
- リンクカラーが変わりません。
外部CSSでリンクカラー設定したいのですがうまくできません。 最初からvisited設定カラーとなり、visitedはactive設定カラーで表示されてしまいます。（link設定カラーが適用されません。） 前回同じような質問をさせていただき、解決したと思ったのですが、作り直しているうちにまた解らなくなってしまいました。ページ自体は問題なくジャンプするのですが、どこが間違っているのでしょうか？ よろしくご指導お願い致します。 [site] ├[contents] │ └ [index] │ └ index.html │ └[styles-site.css] └ navi.css index.html <html> <head> <link href="../../styles-site.css/navi.css" rel="stylesheet" type="text/css"> </head> <body> <div class="navi"> <div><a href="index.html">top</a></div> </div> </body> </html> .navi.css <style type="text/css"> <!-- .navi div { float:left; width:45px; text-align:center; } a:link { color:#ff9933 } a:visited { color:#cccccc } a:active { color:#0000f5 } a:hover { color:#009700 } -->
- ベストアンサー
- その他（プログラミング・開発）
お礼
なるほど！そういうことですか。頭の中で整理できました。 ご丁寧に説明して頂きましてありがとうございました。 これからは参考のURLにあるページを自分で探し出せるようにします。。 ご迷惑おかけしてすみません。